angularjs

如何监听angularjs列表数据是否渲染完毕

文章目录
  1. 第一种通过回调函数
    1. 前端HTML
  • 第二种方法是用消息传递的机制
    1. js脚本

    • 有时候我们需要在ng列表元素渲染完毕后去执行一段js脚本，angularjs 刚好提供了ng-repeat 的一个属性$last，然后为大家简单介绍2种方式

    第一种通过回调函数

    前端HTML
    1
    2
    3
    4
    5
    <ul class="smart-timeline-list">
        <li data-ng-repeat="item in lists" on-finish-render-filters="Complete">
            <a href="{{item.url}}">{{item.title}}</a>
        </li>
    </ul>

    #####js脚本

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    angular.module('mainApp').directive('onFinishRenderFilters', function ($timeout) {
        return {
            restrict: 'A',
            link: function(scope,element,attr) {
                if (scope.$last === true) {
                	var finishFunc=scope.$parent[attr.onFinishRenderFilters];
                	if(finishFunc)
                	{
                		finishFunc();
                	}
                }
            }
        };
    })
    .controller('test',["$scope",function($scope){
        $scope.Complete=function(){
    		$('#div_scrollbar').tinyscrollbar();
    	}
    }]);

    • 分析：on-finish-render-filters 传入一个回调函数Complete ，渲染时每次会判断当前渲染记录是否为最后一条，若为最后一条，则执行Complete 函数。

    第二种方法是用消息传递的机制

    1
    2
    3
    4
    5
    <ul class="smart-timeline-list">
        <li data-ng-repeat="item in lists" on-finish-render-filters>
            <a href="{{item.url}}">{{item.title}}</a>
        </li>
    </ul>
    js脚本
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    angular.module('mainApp').directive('onFinishRenderFilters', function ($timeout) {
        return {
            restrict: 'A',
            link: function(scope,element,attr) {
                if (scope.$last === true) {
                    $timeout(function() {
                        //根据controller的关系是选择$emit或者$broadcast
                        scope.$emit('ngRepeatFinished');
                    });
                }
            }
        };
    })
    .controller('test',["$scope",function($scope){
        $scope.$on('ngRepeatFinished'， function (ngRepeatFinishedEvent) {
    		$('#div_scrollbar').tinyscrollbar();
        });
    }]);
    • 分析：渲染时同样每次会判断当前渲染记录是否为最后一条，若为最后一条，则想父类或者子类的controller传递消息，对应的controller里添加消息的接受监听方法。