Question

我有一个带有父控制器的父视图，带有2个子组件，每个组件都有自己的控制器。

像这样的东西

<section>     // Main Controller
  <table-users listusers="users"></table-users>     // Component Table User Controller
  <table-news listusers="users"></table-news>       // Component Table News Controller
</section>

主控制器向API执行GET XHR请求（需要1或2秒的aprox），并将该请求的响应传递给组件。

(function() {
  'use strict';

  angular
    .module('app.view')
    .component('tableUsers', {
      bindings: {
        listusers: '='
      },
      controller   : 'UsersTableController',
      controllerAs : 'vm',
      templateUrl  : 'whatever.html'

    });

})();

我的问题是在组件已经打印后返回响应...

所以我得到了vm.listusers = undefined：S 我有一个vm.listusers = [{}，{} ...]对象......

如果我在MainController中创建一个虚假的vm.users，一切正常，那么问题是GET太晚返回响应。

我刚刚使用GitHub API创建了这个示例案例的 PLUNKR CASE LINK

有没有办法告诉组件 - 嘿等到在DOM中打印之前返回此值或类似的东西？这里有点失踪。

先谢谢

Answer 1

从Angular 1.5.3开始，我们可以访问一些甜蜜的方法，其中一种称为$ postLink，它基本上可以模仿组件中的链接器函数，也可以基本上只编写组件。

    vm.$postLink = function() {
      $timeout(function() {
        vm.users = vm.listusers;
      })
    }

如果没有它，我就无法正常工作。无论如何它说消防一个消化周期。

有些地方可以阅读here，here，我也写过here

现在已经说了所有为什么你绑定了一个已经＆＃34;绑定到控制器的值＆＃34;只使用已存在的绑定...

 angular
.module('app')
.component('tableUsers', {
  bindings: {
    listusers: '='
  },
  controller   : 'ComponentController',
  controllerAs : 'vm',
  template  : '<h1>{{vm.title}}</h1>'+
              '<p>{{vm.listusers}}</p>' +
              '<ul>' +
                '<li ng-repeat="user in vm.listusers">' +
                  '<strong>{{user.login}}</strong><span> - {{user.id}} </span>' +
                '</li>' +
              '</ul>'
});

无需使用vm.users = vm.listusers ...它已经绑定到控制器，只需使用它......

在组件的源代码中，您将看到我们熟悉指令的bindToController行默认为我们传递的绑定数组。

bindToController: options.bindings || {},

组件都是关于删除指令强加给我们的那个糟糕的样板文件。

此外，您还可以利用控制器作为开箱即用的命名。无需在模板中给出无意义的vm名称$ ctrl是＆＃34; free＆＃34;绑定我们也开箱即用 - 我强烈主张使用它。

 angular
.module('app')
.component('tableUsers', {
  bindings: {
    listusers: '<' // Use 1 way bindings to enforce uni-directional data flow
  },
  controller   : 'ComponentController',
  template  : '<h1>{{$ctrl.title}}</h1>'+
              '<p>{{$ctrl.listusers}}</p>' +
              '<ul>' +
                '<li ng-repeat="user in $ctrl.listusers">' +
                  '<strong>{{user.login}}</strong><span> - {{user.id}} </span>' +
                '</li>' +
              '</ul>'
});

最后是你的PLUNKR

获得控制器值之前打印的AngularJS 1.5组件

1 个答案: