1

我有一个带有父控制器的父视图，有 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 秒），并且该请求的响应被传递给组件。

(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 中打印之前返回或者类似的东西？这里有点遗漏。

提前致谢

4

1 回答 1

1

从 Angular 1.5.3 开始，我们可以使用一些很好的方法，其中一种称为 $postLink，它基本上可以模仿组件中的链接器功能，并且是一种基本上只编写组件的方法。

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

$timeout 有一个问题，没有它我无法正常工作。无论如何，它说启动一个消化循环。

一些可以在这里阅读的地方，这里，我也在这里写过

现在说了这么多，为什么要绑定一个已经“绑定到控制器”的值，只需使用已经存在的绑定......

 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 是我们也开箱即用的“免费”绑定 - 我强烈主张使用它。

 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

于 2016-06-27T09:56:41.223 回答