文档章节

angular指令监听ng-repeat渲染完成后执行自定义事件方法

孟飞阳
 孟飞阳
发布于 08/20 20:46
字数 347
阅读 6
收藏 1

今天工作中遇到需要用到ng-repeat遍历渲染完后执行某个操作,angular本身并没有提供监听ng-repeat渲染完成的指令,所以需要自己创建自定义指令。

在ng-repeat模板实例内部会暴露出一些特殊属性$index/$first/$middle/$last/$odd/$even,$index会随着每次遍历(从0开始)递增,当遍历到最后一个时,$last的值为true,所以可以通过判断$last的值来监听ng-repeat的执行状态,

怎么在遍历过程中拿到$last的值:自定义指令

var app = angular.module('app',[]);

app.directive('repeatFinish',function(){
    return {
        link: function(scope,element,attr){
            console.log(scope.$index)
            if(scope.$last == true){
                scope.$eval( attr.repeatFinish );
            }
        }
    }
})

app.controller('appCtrl',function($scope,$element){
    $scope.arr = [1,2,3,4,5,6];
    $scope.tip = '';

    //定义repeat完成后要执行的方法,方法名可自行定义
    $scope.repeatDone = function(){
        $scope.tip = 'ng-repeat完成,我要开始搞事情了!!!';
     //执行自己要执行的事件方法
    }
});

调用时使用angular调用指令的方法就可以了。

<div ng-repeat="i in arr" repeat-finish="repeatDone();">
    <p ng-bind="i"></p>
</div>

 

本文转载自:https://www.cnblogs.com/kenz520/p/6842674.html

共有 人打赏支持
孟飞阳
粉丝 205
博文 964
码字总数 543203
作品 5
朝阳
个人站长
再谈angularJS数据绑定机制及背后原理—angularJS常见问题总结

Angular 的数据绑定采用什么机制,详述原理? 脏检查机制。阐释脏检查机制,必须先了解如下问题。 单向绑定(ng-bind) 和 双向绑定(ng-model) 的区别? ng-bind 单向数据绑定($scope ->...

634117608
04/19
0
0
探索angular源码--启动(1)

前言 angular2.0已经出来了,本来应该是研究最新的angular源码,但毕竟用了angular1这么久了,一直对其源码实现十分好奇,再加上研究源码主要目的是学习,版本不是特别重要,因此就1.3版源码...

烽穹寒渊
2015/08/01
0
0
ng-animate和ng-cookies用法

———ng-animate 本文讲一下Angular中动画应用的部分。 首先,Angular本生不提供动画机制,需要在项目中加入Angular插件模块ngAnimate才能完成Angular的动画机制,Angular也不提供具体的动画...

sidney_c
04/15
0
0
angularJs之指令详解(一)

指令(Directives)是所有AngularJS应用最重要的部分。尽管AngularJS已经提供了非常丰富的指令,但还是经常需要创建应用特定的指令。这篇教程会为你讲述如何自定义指令,以及介绍如何在实际项...

Yohance
2015/09/06
0
0
Angular 中得 scope 作用域梳理

$scope 的使用贯穿整个 Angular App 应用,它与数据模型相关联,同时也是表达式执行的上下文.有了 $scope 就在视图和控制器之间建立了一个通道,基于作用域视图在修改数据时会立刻更新 $scope,同...

顽Shi
2014/09/21
0
2

没有更多内容

加载失败,请刷新页面

加载更多

React 服务器渲染原理解析与实践

网盘下载地址 React 服务器渲染原理解析与实践 本套课程,讲解了React中SSR技术的整个搭建思路及流程,完整的从原理上讲清楚了SSR的概念,重点在于讲解编写SSR框架遇到的各种知识点,以及细节...

qq__2304636824
5分钟前
0
0
Jenkins使用

clean install -Dmaven.test.skip=true

1713716445
14分钟前
0
0
多线程

1. 多线程概念。并发和并行的概念。 多线程指的是一段时间内cpu同时执行多个线程。一个程序至少运行>=1个进程,进程就是运行中的程序,而一个进程至少运行>=1个线程,线程是操作系统能调度的...

鱼想吃肉
今天
0
0
HBase 表修复在线方式和离线方式

一、在线修复 1.1 使用检查命令 $ ./bin/hbase hbck 该命令可完整修复 HBase 元数据信息;存在有错误信息会进行输出; 也可以通过如下命令查看详细信息: $ ./bin/hbase hbck -details 1.2 ...

Ryan-瑞恩
今天
3
0
redis 系列二 -- 常用命令

1.基础命令 info ping quit save dbsize select flushdb flushall 2.键命令 2.1 set 直接赋值 set a a 2.2 get 取值 get a 2.3 exists 是否存在 exists a 2.4 expire 设置剩余时间 秒 expire......

imbiao
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部