angular指令：判断ng-repeat完成后的回调事件

来源：互联网发布：山东联通宽带网络测速编辑：程序博客网时间：2024/06/08 15:21

项目中遇到个功能点，需要在ng-repeat循环完成后才能触发，记录下。

①书写指令

    //自定义repeat完成指令    app.directive('repeatFinish',function($timeout){        return {            restrict: 'A',            link: function(scope,elem,attr){                //当前循环至最后一个                if (scope.$last === true) {                    $timeout(function () {                        //向父控制器传递事件消息                        scope.$emit('repeatFinishCallback');                    },100);                }            }        }    });

②控制器中接收回调事件

    //接收repeat完成事件    $scope.$on('repeatFinishCallback',function(){        //这里写repeat后需要进行的操作        //demo:获取ul的高度        var ulH = document.getElementById('tagList').offsetHeight;        console.log('ul的高度:'+ ulH +'px');    });

③页面中调用指令

    <ul id="tagList">        <li ng-repeat="x in tagList" repeat-finish>{{x.name}}</li>    </ul>

拓展知识：$emit、$broadcast和$on是各个控制器间的通信手段。

$emit 是由子控制器向父控制器发送事件与数据；
$broadcast与$emit相反；
$on是用于事件与数据的接收

附上完整的实例代码：

    <!doctype html>    <html lang="en">    <head>        <meta charset="UTF-8">        <meta name="viewport"              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">        <meta http-equiv="X-UA-Compatible" content="ie=edge">        <title>Document</title>        <style>            *{                margin: 0;                padding: 0;            }            .tagBox{                width: 100px;                margin: 100px;                border: 1px solid #000;            }            ul{                overflow: hidden;            }            li{                float: left;                margin-right: 10px;                list-style: none;            }        </style>    </head>    <body ng-app="myApp" ng-controller="myController">        <div class="tagBox">            <ul id="tagList">                <li ng-repeat="x in tagList" repeat-finish>{{x.name}}</li>            </ul>        </div>        <script src="angular.js"></script>        <script>            var app = angular.module('myApp',[]);            //自定义repeat完成指令            app.directive('repeatFinish',function($timeout){                return {                    restrict: 'A',                    link: function(scope,elem,attr){                        //当前循环至最后一个                        if (scope.$last === true) {                            $timeout(function () {                                //向父控制器传递事件消息                                scope.$emit('repeatFinishCallback');                            },100);                        }                    }                }            });            //控制器            app.controller('myController',function($scope){                $scope.tagList = [{                    id: 1,                    name: '苹果'                },{                    id: 2,                    name: '香蕉'                },{                    id: 3,                    name: '橘子'                }];                //接收repeat完成事件                $scope.$on('repeatFinishCallback',function(){                    //这里写repeat后需要进行的操作                        //demo:获取ul的高度                    var ulH = document.getElementById('tagList').offsetHeight;                    console.log('ul的高度:'+ ulH +'px');                });            });        </script>    </body>    </html>

阅读全文

0 0