AngularJS 1.5 Components printed before 获取控制器值

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 秒），并将该请求的响应传递给组件。

(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 returns 响应太晚了。

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

有没有办法告诉组件 - 嘿，等到这个值返回后再打印在 DOM 或类似的东西中？这里少了点。

在此先致谢

Answer 1

自 Angular 1.5.3 以来，我们可以使用一些甜美的方法，其中之一称为 $postLink 它是我们基本上可以模仿组件中的链接器函数的方式，也是一种基本上只编写组件的方式。

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

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

一些可以阅读的地方here, here and I also wrote about it here

现在说了这么多为什么要绑定一个已经存在的值 "bound to the controller" 只需使用已经存在的绑定...

 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 || {},

组件都是关于删除指令强加给我们的蹩脚样板。

您还可以利用开箱即用的 controllerAs 命名。无需在模板中为其赋予无意义的名称 vm $ctrl 是 "free" 绑定，我们也是开箱即用的 - 我强烈提倡使用它。

 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 Components printed before 获取控制器值

AngularJS 1.5 Components printed before gets the controller values

javascript

angularjs

angularjs-http

angularjs-components