Angular ng-repeat過濾器完成渲染事件

Angular有可能對完成的ng-repeat更新進行回調嗎？Angular ng-repeat過濾器完成渲染事件

我可以通過使用指令和$ last屬性成功捕獲最初的呈現，但它不適用於視圖更新。

我有一個大的列表，並且過濾需要時間，我想在Angular排序視圖時顯示一個sppiner，因此我正在尋找一種方法來捕捉當前並隱藏微調。

的應用程序的行爲應該是： 1.click上的排序按鈕 2.spinner應該出現 3.angular過濾/數據將被責令 4.finished爲了腳本 5.ordered數據顯示 6.spinner皮

謝謝。

2015-07-12 Din Grinshtein

沒有你看着http://stackoverflow.com/questions/13471129/NG-R EPEAT精加工事件 –

查看Pankaj Parkar提供的鏈接中的一些示例後，我將plunker作爲可能實現的演示。我不認爲它是完全最佳的，你應該尋找更好的解決方案，但如果你仍在研究這個問題，你可能會發現它是一個有用的起點。這不是很漂亮，但它聽起來可能是你想要的東西。

HTML

<!DOCTYPE html> 
<html ng-app="plunker"> 

    <head> 
    <meta charset="utf-8" /> 
    <title>AngularJS Plunker</title> 
    <script>document.write('<base href="' + document.location + '" />');</script> 
    <link rel="stylesheet" href="style.css" /> 
    <script data-require="[email protected]" src="https://code.angularjs.org/1.4.2/angular.js" data-semver="1.4.2"></script> 
    <script src="app.js"></script> 
    </head> 

    <body ng-controller="MainCtrl"> 

    <button ng-click="populateBigTable()">Populate Table</button> 

    <div class="table-wrapper"> 
     <div class="overlay" ng-hide="hideOverlay">Loading</div> 
     <table> 
     <thead> 
      <tr> 
      <th>id</th> 
      <th>item</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr ng-hide="hidePlaceholder"> 
      <td colspan=2 class="placeholder">(no data here yet..)</td> 
      </tr> 
      <tr ng-repeat="some in data" on-complete="done()" > 
      <td>{{some.id}}</td> 
      <td>{{some.item}}</td> 
      </tr> 
     </tbody> 
     </table> 
    </div> 

    </body> 

</html>

app.js

var app = angular.module('plunker', []); 

app.controller('MainCtrl', function($scope, $timeout) { 

    $scope.hideOverlay  = true; 
    $scope.hidePlaceholder = false; 

    $scope.done = function(){ 
    $scope.hideOverlay = true; 
    } 

    $scope.data = []; 

    $scope.populateBigTable = function(){ 

    var data = []; 

    $scope.hideOverlay  = false; 
    $scope.hidePlaceholder = true; 

    // HACK 
    // needed so that angular has time to hide elements 
    // no ideal but does the job 
    $timeout(function(){ 
     for(var i = 0; i < 30000; i++){ 
     data.push({ 
      id: i, 
      item: 'some item' 
     }); 
     } 

     $scope.data = data; 
    }, 25) 

    } 

}); 


app.directive('onComplete', function(){ 
    return { 

    restrict: 'AE', 

    link: function(scope, element, attrs){ 

     if(scope.$last){ 

     scope.$eval(attrs.onComplete); 

     } 
    } 

    } 
});

CSS

.table-wrapper { 
    position:relative; 
    width: 100%; 
} 

table { 
    width: 100%; 
    table-layout: fixed; 
    min-height: 500px; 
} 

table tr td { 
    border: 1px solid black; 

} 

.placeholder { 
    text-align: center; 
} 

.overlay{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 10; 
    background-color: rgba(0,0,0,0.5); /*dim the background*/ 
}

來源

2015-07-12 12:28:02

Angular ng-repeat過濾器完成渲染事件

回答

相關問題