AngularJS 1.5组件模板完全渲染后的触发函数
我正在使用Angular的1.5组件。AngularJS 1.5组件模板完全渲染后的触发函数
基本上我需要在模板完全呈现后触发一个函数。
所有这些组件都是一个父组件内。 组件1进入了一个ng-repeat,里面装满了卡片,但我需要设置组件2的高度等于组件1的高度。
组件1包含动态数据,因此它可能是一点点长或短,我没有发现任何聪明的方法来检索COMP的整个高度1.
编辑:
在COMP 1数据已经由父组件载入,我遇到了ng-repeat错误,它一步一步地填充组件。
也许你需要不同的方法?
我的意思是,如果你已经在父组件的所有数据,以及NG-重复结束
<div class="container></div>
而且一些CSS flexboxes
.container {
display: flex;
flex-wrap: wrap;
}
,使所有的div后无法触发resizeHeight相等的高度
但也有一些不好的解决方法,如:
在为父级
setTimeout(function(){
//Do resize
scope.$apply();
}, 0)
还记得那件事:
在你childComponent是NG重复的,你可以访问
if (scope.$last){
// do resize
}
我想你应该有状态财产在你的父组件和子组件更新
function ParentComponentController() {
var vm = this;
vm.readyStatus = {
Component1: false,
Component2: false,
// etc
}
vm.checkReadyStatus = function(){
var isReady = true;
for(status in vm.readyStatus) {
if(status == false) {
isReady = false;
}
}
return isReady;
}
vm.resizeHeights = function() {
if(vm.checkReadyStatus()) {
// do resize
}
}
}
所以你需要通过vm.resizeHeights到您的子组件
ChildComponent1 = {
bindings: {
resizeHeights: '&',
readyStatus: '='
},
controller: function() {
var vm = this;
doAsyncRequest().then(function(){
vm.readyStatus = true;
vm.resizeHeights() // so if template is ready, we execute resize
})
}
}
我希望它有帮助
好......但我怎么能触发状态变化?这是我的问题 – permaban96
我更新了我的评论,请检查它 P.S.或者你可以传递准备状态到 'vm.resizeHeights({Component1:true})' 并更新resizeHeights函数中的状态 – Leguest
对不起,我忘了添加一些重要的信息...我已经有COMP 1中的数据,没有任何异步请求... 但无论如何,当请求结束时,组件1的高度仍未完全初始化。 – permaban96
认为最好的解决办法是在CSS中使用flexbox布局(角度材质使其更容易)处理此问题。
如果你坚持在javascript中进行高度修正,那么我会制作第三个组件,它同时保存组件1和2. 然后在新组件的$ postLink函数中,可以使用子元素$元素,并调整高度。
是的,这完全是我最终想到的...... – permaban96