《AngularJS》--监听angularjs列表数据是否渲染完毕

  小编在项目中遇到这样一个需求，利用AngularJS在手机页面双向绑定一些数据，而且这些数据是以列表的形式展现出来的，当这些数据渲染完成之后，需要在列表上面加载一些图片，而且这些图片是不断的自动切换。想来想去，于是就用到了自己定义的指令，下面是具体的代码。

  1、HTML代码

<div class="bd">        <ul>            <li ng-repeat="item in list " on-finish-render-filters>                <a class="pic" ng-href="{{item.redirectUrl}}"><img src="{{item.imgUrl}}"/></a>                <a class="tit" ng-href="{{item.redirectUrl}}">                    <span class="db fl one_text_overflow w100p" style="padding-right: 61px; box-sizing: border-box;">                        {{item.name}}                    </span>                </a>            </li>        </ul> </div>

  2、定义方法，请求后台数据

var app=angular.module("MyModule",[]); app.controller('controller1', function ($scope, $http, $log, $state, $timeout, $stateParams) { $scope.list = []; $http.get(url)   .success(function (data) {                if (data != null) {                    $scope.list=data；                }            })  .error(function (ex, state) {                console.log(state + ":" + ex);            });  });

  3、监听最后一条数据是否渲染完毕

app.directive('onFinishRenderFilters', function ($timeout) {        return {            restrict: 'A',            link: function (scope, element, attr) {                if (scope.$last === true) {    //判断是否是最后一条数据                    $timeout(function () {                        scope.$emit('ngRepeatFinished'); //向父级scope传送ngRepeatFinished命令                    });                }            }        };    });

  4、最后一条数据渲染完毕后，父级Scope接收到事件，并作出图片切换的操作。

$scope.$on('ngRepeatFinished', function (ngRepeatFinishedEvent) {            //下面是在table render完成后执行的js            TouchSlide({                slideCell: "#slideBox",                titCell: ".hd ul", //开启自动分页 autoPage:true ，此时设置 titCell 为导航元素包裹层                mainCell: ".bd ul",                effect: "leftLoop",                autoPage: true,//自动分页                autoPlay: true //自动播放            });        });    });

  这样，页面列表的最后一条数据加载完毕后，图片就加载出来了。需求实现了。现在看看我们用到的代码，$emit是用来向父级Scope传送事件，$brodercast是向子级scope传送事件，而$scope.$on()是监听事件，利用这几个函数就能完成类似的功能。