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

kmynzznz  于 2023-05-16  发布在  Angular
关注(0)|答案(1)|浏览(129)

我有一个父视图,有一个父控制器,有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,我有一个vm.listusers = [{},{}...]对象…
如果我在MainController中创建一个假的vm.users,一切都正常,所以问题是GET返回响应太晚了。
我刚刚使用GitHub API创建了这个示例案例:Plunker
有没有一种方法可以告诉组件在打印到DOM或类似的东西之前等待这个值的返回?

vs91vp4v

vs91vp4v1#

从Angular 1.5.3开始,我们可以访问一些很好的方法,其中一个叫做$postLink,它是我们基本上可以模仿组件中的链接器功能的方法,也是一种基本上只编写组件的方法。

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

有一个捕获的$timeout,我还没有能够得到正确的工作没有它。反正上面写着启动消化循环。
一些地方阅读它herehere和我也写了关于它here
现在说了这么多,为什么你要绑定一个已经“绑定到控制器”的值,只是使用已经存在的绑定……

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行from指令默认为我们传递给它的绑定数组。

bindToController: options.bindings || {},

组件就是要去除指令强加给我们的那些蹩脚的样板文件。
此外,您还可以利用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

相关问题