Question

我正在使用组件而不是原始控制器将大型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>

你能告诉我哪里出了问题吗？这应该相当简单，我不确定为什么它没有按预期进行绑定。

Answer 1

我在您的组件中看不到templateUrl或template的定义。

您可以添加此template:"<span>Name: {{vm.user}}</span>"或链接html页面。 You can read more in the documentation here

(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>

Answer 2

您不能像这样填写组件模板。您必须定义一个链接到组件的模板。

 '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";
 });

AngularJS绑定问题

2 个答案: