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

最新推荐文章于 2019-04-07 12:41:42 发布

大力酱

最新推荐文章于 2019-04-07 12:41:42 发布

阅读量4.3k

点赞数 1

分类专栏： angular 文章标签： angular 前端指令 repeat

本文链接：https://blog.csdn.net/p493794782/article/details/72674688

版权

angular 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

项目中遇到个功能点，需要在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>