大佬教程收集整理的这篇文章主要介绍了《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>
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()是监听事件,利用这几个函数就能完成类似的功能。
以上是大佬教程为你收集整理的《AngularJS》--监听angularjs列表数据是否渲染完毕全部内容,希望文章能够帮你解决《AngularJS》--监听angularjs列表数据是否渲染完毕所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。