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

赫克托·莱昂

我有一个带有一个父控制器的父视图,该父控制器有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或类似的东西中?这里有点失踪。

提前致谢

斯坦·莫奇

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

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

没有$ timeout的一个陷阱,我没有它就无法正常工作。无论如何,它说触发了一个摘要循环。

在这里这里有一些可以阅读的地方在这里我也写过关于它的文章

现在已经说了所有为什么u绑定一个已经“绑定到控制器”的值了,只需要使用已经存在的绑定即可。

 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 ...它已经绑定到控制器,只需使用它...

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

bindToController: options.bindings || {},

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

然后,您还可以利用开箱即用的controllerAs命名。不需要在模板$ ctrl中给它起毫无意义的vm名称,这是我们也可以直接使用的“免费”绑定-我强烈主张使用它。

 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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

TOP 榜单

热门标签

归档