javascript - AngularJS 绑定(bind)问题

Question

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

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

Answer 1

您不能这样填充组件模板。您必须定义链接到您的组件的模板。

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