Question

我正在使用Angular的1.5组件。

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

Components layout

所有这些组件都在父组件内。组件1已经进入了一个用卡片填充的ng-repeat，但是我需要将组件2的高度设置为等于组件1的高度。

组件1包含动态数据，因此它可能会更长或更短，我找不到任何智能方法来检索COMP 1的完整高度。

编辑：

在COMP 1中，数据已由父组件加载，我的ng-repeat有问题，逐步填充组件。

Answer 1

我认为你的父组件中应该有 state 属性并从子组件更新它

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

   }
}

我希望它有所帮助

Answer 2

认为最好的解决方案是使用flexbox布局在css中处理此问题（angular-material使其更容易）。

如果你坚持在javascript中进行高度校正，那么我会制作一个同时包含组件1和2的第三个组件。然后在新组件的$ postLink函数中，您可以使用$ element获取子元素，并调整高度。

Answer 3

也许你需要不同的方法？

我的意思是，如果您已经拥有父组件中的所有数据，并且在ng-repeat结束后无法触发resizeHeight

<div class="container></div>

还有一些css flexboxes

 .container {
   display: flex;
   flex-wrap: wrap;
}

这使得所有div都等于高度

但也有一些不好的解决方法，如：

在parentComponent

中

 setTimeout(function(){
   //Do resize

   scope.$apply();
 }, 0)

我还记得那件事：

在你的childComponent中，ng-repeated可以访问

if (scope.$last){
  // do resize 
}

模板完全渲染后的AngularJS 1.5组件触发器功能

3 个答案: