Gọi một chức năng khi ng-repeat đã kết thúc

Những gì tôi đang cố gắng thực hiện về cơ bản là một trình xử lý "hoàn thành lặp lại kết xuất". Tôi có thể phát hiện khi hoàn thành nhưng tôi không thể tìm ra cách kích hoạt chức năng từ nó.

Kiểm tra câu đố: http://jsfiddle.net/paulocoelho/BsMqq/3/

Mã não

var module = angular.module('testApp', [])
    .directive('onFinishRender', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            if (scope.$last === true) {
                element.ready(function () {
                    console.log("calling:"+attr.onFinishRender);
                    // CALL TEST HERE!
                });
            }
        }
    }
});

function myC($scope) {
    $scope.ta = [1, 2, 3, 4, 5, 6];
    function test() {
        console.log("test executed");
    }
}

HTML

<div ng-app="testApp" ng-controller="myC">
    <p ng-repeat="t in ta" on-finish-render="test()">{{t}}</p>
</div>

Trả lời : Fiddle làm việc từ việc hoàn thiện: http://jsfiddle.net/paulocoelho/BsMqq/4/

var module = angular.module('testApp', [])
    .directive('onFinishRender', function ($timeout) {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            if (scope.$last === true) {
                $timeout(function () {
                    scope.$emit(attr.onFinishRender);
                });
            }
        }
    }
});

Lưu ý rằng tôi đã không sử dụng .ready()mà chỉ gói nó trong một $timeout. $timeoutđảm bảo rằng nó được thực thi khi các phần tử lặp lại ng thực sự hoàn thành kết xuất (bởi vì phần tử $timeoutsẽ thực thi ở cuối chu kỳ phân loại hiện tại - và nó cũng sẽ gọi $applynội bộ, không giống nhưsetTimeout ). Vì vậy, sau khi ng-repeatkết thúc, chúng tôi sử dụng $emitđể phát ra một sự kiện đến phạm vi bên ngoài (phạm vi anh chị em và phụ huynh).

Và sau đó trong bộ điều khiển của bạn, bạn có thể bắt nó với $on:

$scope.$on('ngRepeatFinished', function(ngRepeatFinishedEvent) {
    //you also get the actual event object
    //do stuff, execute functions -- whatever...
});

Với html trông giống như thế này:

<div ng-repeat="item in items" on-finish-render="ngRepeatFinished">
    <div>{{item.name}}}<div>
</div>

Sử dụng $ evalAsync nếu bạn muốn cuộc gọi lại của mình (nghĩa là test ()) được thực thi sau khi DOM được xây dựng, nhưng trước khi trình duyệt kết xuất lại. Điều này sẽ ngăn ngừa nhấp nháy - ref .

if (scope.$last) {
   scope.$evalAsync(attr.onFinishRender);
}

Fiddle .

Nếu bạn thực sự muốn gọi lại cuộc gọi của mình sau khi kết xuất, hãy sử dụng $ timeout:

if (scope.$last) {
   $timeout(function() { 
      scope.$eval(attr.onFinishRender);
   });
}

Tôi thích $ eval thay vì một sự kiện. Với một sự kiện, chúng ta cần biết tên của sự kiện và thêm mã vào bộ điều khiển của chúng ta cho sự kiện đó. Với $ eval, có ít khớp nối giữa bộ điều khiển và lệnh.

Các câu trả lời đã được đưa ra cho đến nay sẽ chỉ hoạt động ngay lần đầu tiên ng-repeatđược đưa ra , nhưng nếu bạn có động ng-repeat, nghĩa là bạn sẽ thêm / xóa / lọc các mục và bạn cần được thông báo mỗi khi ng-repeatđược kết xuất, những giải pháp đó sẽ không làm việc cho bạn.

Vì vậy, nếu bạn cần được thông báo MERYI LẦN rằngng-repeat lần đầu tiên được kết xuất lại và không chỉ lần đầu tiên, tôi đã tìm ra cách để làm điều đó, nó khá 'hacky', nhưng nó sẽ hoạt động tốt nếu bạn biết bạn là ai đang làm. Sử dụng điều này $filtertrong của bạn ng-repeat trước khi sử dụng bất kỳ khác$filter :

.filter('ngRepeatFinish', function($timeout){
    return function(data){
        var me = this;
        var flagProperty = '__finishedRendering__';
        if(!data[flagProperty]){
            Object.defineProperty(
                data, 
                flagProperty, 
                {enumerable:false, configurable:true, writable: false, value:{}});
            $timeout(function(){
                    delete data[flagProperty];                        
                    me.$emit('ngRepeatFinished');
                },0,false);                
        }
        return data;
    };
})

Đây sẽ $emitlà một sự kiện được gọi ngRepeatFinishedmỗi khi nó ng-repeatđược kết xuất.

Làm thế nào để sử dụng nó:

<li ng-repeat="item in (items|ngRepeatFinish) | filter:{name:namedFiltered}" >

Bộ ngRepeatFinishlọc cần được áp dụng trực tiếp cho một Arrayhoặc một Objectđịnh nghĩa trong của bạn $scope, bạn có thể áp dụng các bộ lọc khác sau.

Làm thế nào KHÔNG sử dụng nó:

<li ng-repeat="item in (items | filter:{name:namedFiltered}) | ngRepeatFinish" >

Không áp dụng các bộ lọc khác trước và sau đó áp dụng ngRepeatFinishbộ lọc.

Khi nào tôi nên sử dụng cái này?

Nếu bạn muốn áp dụng các kiểu css nhất định vào DOM sau khi danh sách kết thúc hiển thị, bởi vì bạn cần phải tính đến kích thước mới của các thành phần DOM đã được kết xuất lại bởi ng-repeat. (BTW: những loại hoạt động đó nên được thực hiện trong một chỉ thị)

Những gì KHÔNG nên làm trong chức năng xử lý ngRepeatFinishedsự kiện:

• Không thực hiện $scope.$applychức năng đó hoặc bạn sẽ đặt Angular vào một vòng lặp vô tận mà Angular sẽ không thể phát hiện ra.

• Không sử dụng nó để thực hiện các thay đổi trong các $scopethuộc tính, vì những thay đổi đó sẽ không được phản ánh trong chế độ xem của bạn cho đến $digestvòng lặp tiếp theo và vì bạn không thể thực hiện nên $scope.$applychúng sẽ không được sử dụng.

"Nhưng các bộ lọc không có nghĩa là được sử dụng như vậy !!"

Không, họ không, đây là một hack, nếu bạn không thích nó không sử dụng nó. Nếu bạn biết một cách tốt hơn để hoàn thành điều tương tự, xin vui lòng cho tôi biết điều đó.

Tóm tắt

Đây là một hack và sử dụng sai cách rất nguy hiểm, chỉ sử dụng nó để áp dụng các kiểu sau khi ng-repeatkết xuất xong và bạn không nên có bất kỳ vấn đề nào.

Nếu bạn cần gọi các hàm khác nhau cho các lần lặp ng khác nhau trên cùng một bộ điều khiển, bạn có thể thử một cái gì đó như thế này:

Chỉ thị:

var module = angular.module('testApp', [])
    .directive('onFinishRender', function ($timeout) {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            if (scope.$last === true) {
            $timeout(function () {
                scope.$emit(attr.broadcasteventname ? attr.broadcasteventname : 'ngRepeatFinished');
            });
            }
        }
    }
});

Trong bộ điều khiển của bạn, bắt các sự kiện với $ on:

$scope.$on('ngRepeatBroadcast1', function(ngRepeatFinishedEvent) {
// Do something
});

$scope.$on('ngRepeatBroadcast2', function(ngRepeatFinishedEvent) {
// Do something
});

Trong mẫu của bạn có nhiều ng-repeat

<div ng-repeat="item in collection1" on-finish-render broadcasteventname="ngRepeatBroadcast1">
    <div>{{item.name}}}<div>
</div>

<div ng-repeat="item in collection2" on-finish-render broadcasteventname="ngRepeatBroadcast2">
    <div>{{item.name}}}<div>
</div>

Các giải pháp khác sẽ hoạt động tốt khi tải trang ban đầu, nhưng gọi $ timeout từ bộ điều khiển là cách duy nhất để đảm bảo rằng chức năng của bạn được gọi khi mô hình thay đổi. Đây là một fiddle làm việc sử dụng $ timeout. Ví dụ của bạn sẽ là:

.controller('myC', function ($scope, $timeout) {
$scope.$watch("ta", function (newValue, oldValue) {
    $timeout(function () {
       test();
    });
});

ngRepeat sẽ chỉ đánh giá một lệnh khi nội dung hàng mới, vì vậy nếu bạn xóa các mục khỏi danh sách của mình, onFinishRender sẽ không kích hoạt. Ví dụ: thử nhập các giá trị bộ lọc trong các câu đố phát ra .

Nếu bạn không phản đối việc sử dụng đạo cụ phạm vi hai đô la và bạn đang viết một lệnh mà nội dung duy nhất là lặp lại, thì có một giải pháp khá đơn giản (giả sử bạn chỉ quan tâm đến kết xuất ban đầu). Trong chức năng liên kết:

const dereg = scope.$watch('$$childTail.$last', last => {
    if (last) {
        dereg();
        // do yr stuff -- you may still need a $timeout here
    }
});

Điều này hữu ích cho các trường hợp bạn có một lệnh cần thực hiện thao tác DOM dựa trên chiều rộng hoặc chiều cao của các thành viên trong danh sách được kết xuất (mà tôi nghĩ là lý do rất có thể người ta sẽ hỏi câu hỏi này), nhưng nó không phải là chung chung như các giải pháp khác đã được đề xuất.

Một giải pháp cho vấn đề này với ngRepeat được lọc có thể là với các sự kiện Đột biến , nhưng chúng không được chấp nhận (không có sự thay thế ngay lập tức).

Sau đó, tôi nghĩ đến một điều dễ dàng khác:

app.directive('filtered',function($timeout) {
    return {
        restrict: 'A',link: function (scope,element,attr) {
            var elm = element[0]
                ,nodePrototype = Node.prototype
                ,timeout
                ,slice = Array.prototype.slice
            ;

            elm.insertBefore = alt.bind(null,nodePrototype.insertBefore);
            elm.removeChild = alt.bind(null,nodePrototype.removeChild);

            function alt(fn){
                fn.apply(elm,slice.call(arguments,1));
                timeout&&$timeout.cancel(timeout);
                timeout = $timeout(altDone);
            }

            function altDone(){
                timeout = null;
                console.log('Filtered! ...fire an event or something');
            }
        }
    };
});

Điều này nối vào các phương thức Node.prototype của phần tử cha mẹ với thời gian chờ $ một lần để theo dõi các sửa đổi liên tiếp.

Nó hoạt động chủ yếu là đúng nhưng tôi đã nhận được một số trường hợp trong đó altDone sẽ được gọi hai lần.

Một lần nữa ... thêm chỉ thị này vào cha mẹ của ngRepeat.

Rất dễ dàng, đây là cách tôi đã làm nó.

.directive('blockOnRender', function ($blockUI) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            
            if (scope.$first) {
                $blockUI.blockElement($(element).parent());
            }
            if (scope.$last) {
                $blockUI.unblockElement($(element).parent());
            }
        }
    };
})

Xin hãy xem fiddle, http://jsfiddle.net/yNXS2/ . Vì lệnh bạn tạo không tạo ra một phạm vi mới, tôi tiếp tục theo cách này.

$scope.test = function(){... làm điều đó xảy ra

Tôi rất ngạc nhiên khi không thấy giải pháp đơn giản nhất trong số các câu trả lời cho câu hỏi này. Những gì bạn muốn làm là thêm một lệnh ngInitvào phần tử lặp lại của bạn (phần tử có lệnh ngRepeat) kiểm tra $last(một biến đặc biệt được đặt trong phạm vi ngRepeatcho biết phần tử lặp lại là phần tử cuối cùng trong danh sách). Nếu $lastđúng, chúng ta sẽ hiển thị phần tử cuối cùng và chúng ta có thể gọi hàm chúng ta muốn.

ng-init="$last && test()"

Mã hoàn chỉnh cho đánh dấu HTML của bạn sẽ là:

<div ng-app="testApp" ng-controller="myC">
    <p ng-repeat="t in ta" ng-init="$last && test()">{{t}}</p>
</div>

Bạn không cần thêm bất kỳ mã JS nào trong ứng dụng của mình ngoài chức năng phạm vi bạn muốn gọi (trong trường hợp này test) , ngInitdo Angular.js cung cấp. Chỉ cần đảm bảo có testchức năng của bạn trong phạm vi để có thể truy cập nó từ mẫu:

$scope.test = function test() {
    console.log("test executed");
}