如何在Angular更新佈局時調用函數，因爲數據發生更改

我有一個顯示鏈接列表的ng-repeat指令。它工作正常，但我的代碼也有一個JavaScript函數，根據它的尺寸放置列表。自然地，在Angular完成數據綁定和修改DOM之前，列表的維度是未知的。如果我在數據更改後立即調用函數，則放置計算會跳轉槍並將列表放置爲空，就好像它是空的。我想在Angular完成修改DOM之後觸發該函數。我怎樣才能做到這一點？如何在Angular更新佈局時調用函數，因爲數據發生更改

編輯：

剛試過ngcloak作爲一個可能的解決方案，遺憾的是它不工作。讀ngcloak的文檔，我的問題不是列表閃爍，但它被放置，如果它是空的，然後停留在那裏。一旦數據綁定完成，我需要一種方法來調用我的函數。

來源

2013-10-04 Boluc Papuccuoglu

當數據發生變化時，使用$ timeout service在延遲後調用維度修飾符？我不知道你是否有任何事件被角度觸發，當它完成dom操作 –

@RanjithR時，我確實想到了使用$ timeout，但它似乎是一個糟糕的選擇，因爲要麼我必須設置一個大的值間隔是安全的（這會產生閃爍），或者當列表很大時，當Angular仍在修改DOM並且列表將被放置，就好像它小於實際的那樣。但是，這是我走的路我猜如果沒有人可以建議在數據綁定完成時調用函數的確定性方式。 –

有一種方法。如果角度處於摘要或應用階段，您可以編寫一個遞歸函數，該函數在100ms之類的短暫超時後調用自身。如果它不是摘要或應用階段，那麼您可以調用展示位置。 –

當數據發生變化時，使用$ timeout service在延遲後調用修飾符。如果由於無法正確猜測時間而導致超時不夠可靠，則可以編寫一個遞歸函數，在100ms等短暫超時後調用自身，以檢查角度是摘要還是應用階段。如果它未處於摘要或應用階段，則可以調用放置修改器。

來源

2013-10-04 20:28:32

我認爲ngCloak是你在找什麼。

來源

2013-10-04 13:57:23

沒有，試過了，它不起作用。看到我的編輯到原始帖子。感謝鏈接tho，有趣的指令，很好的瞭解它。 –

我之前通過創建一個自定義指令來除了ng-repeat之外還使用了這個。因此，例如

<div ng-repeat="foo in bar" myDirective>

什麼，讓你的是，在myDirective您可以訪問該指令的範圍，並在NG重複渲染檢查的最後一個項目。例如，這是我所使用的吳重複渲染一些元素同位素jQuery庫：

angular 
    .module('myModule') 
    .directive('myDirective', function ($timeout) { 
     return { 
      restrict: 'A', 
      link: function postLink(scope, element, attrs) { 
       if (attrs.ngRepeat && scope.$last) { 
        $timeout(function() { 
         $('#myContainer').isotope({ 
          layoutMode: 'fitRows' 
         }); 
        }); 
       } 
      } 
     }; 
    });

此使用HTML，如：

<div id="myContainer" ng-repeat="foo in bar" myDirective> 
    <div class="element">{{foo}}</div> 
</div>

應該給你你在找什麼對於。

只需用$('#myContainer').isotope({})替換ng-repeat完成渲染重複時要執行的操作即可。

來源

2013-10-04 14:50:54

似乎你正在使用類似masonry的庫來定位元素，如果是這樣，請使用angular masonry指令。也有消除jQuery的fork。
但無論如何，看看它，將是有益的。

爲文本數據的延遲小會的工作，如：

timeout = $timeout(function layout() { 
    //layout elements 
}, 30);

的圖像，你可以得到的尺寸完全加載圖像，here之前，你可以找到一個很好的方式。

來源

2014-10-28 11:54:15 Reyraa

對任何人說角完成更新，因爲數據改變的觀點之後就這個問題尋找一種方式來執行功能絆（後不僅頁面加載）：

如果使用$timeout與超時= 0（或省略第二個參數 - 這是默認值），代碼將在下一個摘要週期中執行。

$timeout(function(){ 
    /// your logic here 
}, 0);

在這個問題所描述的情況，本應在自定義指令調用，如@MikeDriver

說明爲什麼不能探測角的當前階段？

根據另一個SO的回答，Angular的作者說不應該使用$階段 - 這是一個內部機制，不是未來安全的。 https://stackoverflow.com/a/21611534/1578982 顯然$超時的方式也更簡單。

來源

2015-03-11 18:56:25 Pietro

如何在Angular更新佈局時調用函數，因爲數據發生更改

回答

相關問題