我正在使用组件而不是原始控制器将大型AngularJS 1.4应用程序升级到1.5。
我有一个基本组件，如下所示：
'use strict';
angular.module('myModule').component('userComponent', {
controllerAs: 'vm',
bindings: {
user: '<'
},
controller:
function userComponent($http) {
let vm = this;
vm.user = "World";
});
当我尝试在模板中显示 vm.user 的值时，它没有显示，控制台中也没有错误：
<user-component>
<h1>Hello {{vm.user}}</h1>
</user-component>
你能告诉我出了什么问题吗？这应该相当简单，我不确定为什么它没有按预期进行绑定。
你不能像这样填充组件模板。 您必须定义链接到组件的模板。
'use strict';
angular.module('myModule').component('userComponent', {
controllerAs: 'vm',
template: '<h1>Hello {{vm.user}}</h1>',
bindings: {
user: '<'
},
controller:
function UserComponent($http) {
let vm = this;
vm.user = "World";
});
我在组件中没有看到必需的templateUrl或template定义。
您可以添加此template:"<span>Name: {{vm.user}}</span>"或链接 html 页面。 您可以在此处的文档中阅读更多信息
(function(angular) {
'use strict';
angular.module('test', []).controller('MainCtrl', function MainCtrl() {});
angular.module('test').component('userComponent', {
controllerAs: 'vm',
bindings: {
user: '<'
},
controller: function UserComponent($http) {
let vm = this;
vm.user = "World";
},
template: "<span>Name: {{vm.user}}</span>"
});
})(window.angular);<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.10/angular.min.js"></script>
<body ng-app="test">
<!-- components match only elements -->
<div ng-controller="MainCtrl as ctrl">
<user-component></user-component>
</div>
</body>