我有一个父视图,有一个父控制器,有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或类似的东西之前等待这个值的返回?
1条答案
按热度按时间vs91vp4v1#
从Angular 1.5.3开始,我们可以访问一些很好的方法,其中一个叫做$postLink,它是我们基本上可以模仿组件中的链接器功能的方法,也是一种基本上只编写组件的方法。
有一个捕获的$timeout,我还没有能够得到正确的工作没有它。反正上面写着启动消化循环。
一些地方阅读它here,here和我也写了关于它here
现在说了这么多,为什么你要绑定一个已经“绑定到控制器”的值,只是使用已经存在的绑定……
不需要使vm.users = vm. listusers...它已经绑定到控制器,只需使用它...
在组件的源代码中,您将看到我们熟悉的bindToController行from指令默认为我们传递给它的绑定数组。
组件就是要去除指令强加给我们的那些蹩脚的样板文件。
此外,您还可以利用controllerAs开箱即用的命名。不需要在模板$ctrl中给予它无意义的名字vm是我们也开箱即用的“免费”绑定-我强烈提倡使用它。
最后是PLUNKR