AngularJS 1.5组件模板完全渲染后的触发函数

我正在使用Angular的1.5组件。AngularJS 1.5组件模板完全渲染后的触发函数

基本上我需要在模板完全呈现后触发一个函数。

Components layout

所有这些组件都是一个父组件内。组件1进入了一个ng-repeat，里面装满了卡片，但我需要设置组件2的高度等于组件1的高度。

组件1包含动态数据，因此它可能是一点点长或短，我没有发现任何聪明的方法来检索COMP的整个高度1.

编辑：

在COMP 1

数据已经由父组件载入，我遇到了ng-repeat错误，它一步一步地填充组件。

来源

2017-04-14 permaban96

也许你需要不同的方法？

我的意思是，如果你已经在父组件的所有数据，以及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 
}

来源

2017-04-14 10:37:09 Leguest

是的，这完全是我最终想到的...... – permaban96

我想你应该有状态财产在你的父组件和子组件更新

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 
     }) 

    } 
}

我希望它有帮助

来源

2017-04-14 10:14:38 Leguest

好......但我怎么能触发状态变化？这是我的问题 – permaban96

我更新了我的评论，请检查它 P.S.或者你可以传递准备状态到 'vm.resizeHeights（{Component1：true}）' 并更新resizeHeights函数中的状态 – Leguest

对不起，我忘了添加一些重要的信息...我已经有COMP 1中的数据，没有任何异步请求... 但无论如何，当请求结束时，组件1的高度仍未完全初始化。 – permaban96

认为最好的解决办法是在CSS中使用flexbox布局（角度材质使其更容易）处理此问题。

如果你坚持在javascript中进行高度修正，那么我会制作第三个组件，它同时保存组件1和2. 然后在新组件的$ postLink函数中，可以使用子元素$元素，并调整高度。

来源

2017-04-14 10:29:42 cYrixmorten

AngularJS 1.5组件模板完全渲染后的触发函数

回答

相关问题