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

【问题标题】：AngularJS 1.5 component Trigger function after template fully rendered模板完全渲染后的AngularJS 1.5组件触发功能
【发布时间】：2017-09-10 14:04:21
【问题描述】：

我正在使用 Angular 的 1.5 组件。

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

Components layout

所有这些组件都在一个父组件内。组件 1 有一个 ng-repeat 内部，它用卡片填充它，但我需要将组件 2 的高度设置为组件 1 的高度。

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

编辑：

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

【问题讨论】：

标签： javascript angularjs angular-components

【解决方案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  
       })

   }
}

希望对你有帮助

【讨论】：

好的...但是如何触发状态更改？那是我的问题
我更新了我的评论，请检查一下或者您可以将就绪状态传递给 vm.resizeHeights({Component1: true}) 并在 resizeHeights 函数中更新状态
对不起，我忘了添加一些重要信息...我已经在 COMP 1 中有数据，我没有任何异步请求...但是无论如何，当请求结束时，组件 1 的高度不是t 仍然完全初始化。

【解决方案2】：

也许您需要不同的方法？

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

<div class="container></div>

还有一些 CSS 弹性框

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

这使得所有的 div 高度相等

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

在父组件中

 setTimeout(function(){
   //Do resize

   scope.$apply();
 }, 0)

我还记得那件事：

在您的 ng-repeated 您可以访问的 childComponent 中

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

【讨论】：

【解决方案3】：

认为最好的解决方案是使用 flexbox 布局在 css 中处理这个问题（角度材料更容易）。

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

【讨论】：