AngularJS之事件之 $timeout 之在 ngRepeat render 完成后再执行

AngularJS之事件之 $timeout 之在 ngRepeat render 完成后再执行

使用 ng-repeat 指令时，在很多情况下，需要在其 render 完成后对 DOM 元素添加一些事件，如绑定 click 事件等。

一、ng-repeat 使用背景
使用 ng-repeat，AngularJs会遍历users数据对象，来 render 渲染出这个table中的内容。

<table>
    <thead>
        <tr>
            <th>Id</th> <th>Name</th> <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="user in users">
            <td>{{user.Id}}</td>
            <td>{{user.Name}}</td>
            <td>{{user.Salary}}</td>
        </tr>
    </tbody>
</table>

二、使用 $timeout 实现在render完成之后，执行Js脚本

说明：这里会用到：自定义指令、 $timeout、 link 函数，详细介绍请自行查阅官方文档。

$timeout : 不会执行，直到元素存在。

第一步：为当前的 app 自定义一个 directive

app.directive('onRendered', function ($timeout) {
    return {
        restrict: 'A',
        link: function(scope, element, attr) {
            if (scope.$last === true) {
                $timeout(function() {
                    scope.$emit('event-ngRepeat-finished');
                });
            }
        }
    };
});

第二步：在需要监听的地方加上该 directive

<tr ng-repeat="user in users" on-rendered>
      <td>{{user.Id}}</td>
      <td>{{user.Name}}</td>
      <td>{{user.Salary}}</td>
</tr>

第三步：为自定义事件添加触发执行函数

$scope.$on('event-ngRepeat-finished', function (event) {
    // write your code here.
});

三、用法举例

<ul ng-controller="MyCtrl">
    <li ng-repeat="item in items" 
        on-finish-render="callMyCustomMethod()"
        on-start-render="callMyCustomMethod2()">
        {{item}}
    </li>
</ul>

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

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

myApp.directive('onFinishRender', ['$timeout', '$parse', function ($timeout, $parse) {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            if (scope.$last === true) {
                $timeout(function () {
                    scope.$emit('ngRepeatFinished');
                    if ( !! attr.onFinishRender) {
                        $parse(attr.onFinishRender)(scope);
                    }
                });
            }




            if (!!attr.onStartRender) {
                if (scope.$first === true) {
                    $timeout(function () {
                        scope.$emit('ngRepeatStarted');
                        if ( !! attr.onStartRender) {
                            $parse(attr.onStartRender)(scope);
                        }
                    });
                }
            }
        }
    }
}]);

myApp.controller('MyCtrl', function($scope){
    $scope.items = [
        "lorem", "ipsum", "dolor", 
        "sit", "amet,", "consectetur", "adipiscing"
    ];

    $scope.callMyCustomMethod = function () {
        console.log('Method called by the directive, when finished rendering');
    }
    $scope.callMyCustomMethod2 = function () {
        console.log('Method2 called by the directive, when starting rendering');
    }

    $scope.$on('ngRepeatFinished', function (ngRepeatFinishedEvent) {
        console.log('Event captured in the controller, when finished rendering');
    });
    $scope.$on('ngRepeatStarted', function (ngRepeatStartedEvent) {
        console.log('Event captured in the controller, when started rendering');
    });
});

转载请注明，
原文出处： http://lixh1986.iteye.com/blog/2429307
















引用：
https://stackoverflow.com/questions/20155733
https://github.com/angular/angular.js/issues/734
http://www.jomendez.com/2015/02/05/ng-repeat-onfinishrender-directive-angularjs/


-