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組件模板完全渲染後的觸發函數

回答

相關問題