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

今天工作中遇到需要用到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>

Demo

时间: 2024-11-03 21:30:44

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

利用angular指令监听ng-repeat渲染完成后执行脚本

业务中有时需要在异步获取数据并用ng-repeat遍历渲染完页面后执行某个操作,angular本身并没有提供监听ng-repeat渲染完成的指令,所以需要自己动手写.有经验的同学都应该知道,在ng-repeat模板实例内部会暴露出一些特殊属性$index/$first/$middle/$last/$odd/$even,$index会随着每次遍历(从0开始)递增,当遍历到最后一个时,$last的值为true,so,通过判断$last的值来监听ng-repeat的执行状态,怎么在遍历过程中拿到$la

js监听input等表单输入框的变化事件oninput

js监听input等表单输入框的变化事件oninput,手机页面开发中使用到文本框textarea输入字符监听文本框变化计算还可以输入多少字符,如果使用onkeyup的话是无法监听到输入法输入的文本变化的,复制粘贴也不能监听到,于是就用到了oninput事件来监听文本框value值的改变.由于是手机端页面没有考虑IE 这货.过去一般都使用onchange/onkeyup/onkeypress/onkeydown实现,但是这存在着一些不好的用户体验.比如onchange事件只在键盘或者鼠标操作改变

c# 获取移动硬盘信息、监听移动设备的弹出与插入事件

原文:c# 获取移动硬盘信息.监听移动设备的弹出与插入事件 备忘一下改功能,主要通过WMI来实现,对于监听外接设备的弹出和插入事件一开始使用IntPtr WndProc事件,但是当监听到改事件时,同过WMI来获取设备,有时候还不能获取到,因此还是使用WqlEventQuery 来监听WMI的变化.下列是主要代码片段 1. 获取硬盘的固件序列号,盘序列号(由系统指派的唯一ID),总容量,剩余容量, 盘符,盘名称等信息 private static List<DriverBase> GetDriv

Ogre 监听类与渲染流程

Ogre中有许多监听类,我们可以简单理解成C#中的事件,这些类作用都不小,说大点可能改变流程,说小点修改参数等,下面列举一些常用的监听类. FrameListener:由Ogre中的Root负责维护,主要针对所有RenderTarget监听 frameStarted:在一桢开始的时候,所有RenderTarget更新之前. frameRenderingQueued:所有RenderTarget更新之后,但是还没交换缓冲区.(意思屏幕上显示没变) frameEnded:所有RenderTarget

移动端 input输入实时监听查询数据渲染

目前有一个需求,用户每输入内容就查找相应的 效果图 遇到的问题 1:每输入一个字母就进行查找,后台压力太大,重复渲染 解决:加入setTimeout   确保输入一定内容后在进行查询渲染 ,注意清除延迟 var time; $('#bname').keyup(function () { time=setTimeout(function () { $.ajax({ url: "/sign", type: "post", data: {bname: $("#b

屏幕触摸事件监听,判断上下左右的操作行为,判断方法缩小的操作行为

在手机屏幕上能够实现的人机交互行为,大致包括点击按钮,拉动滑动块,物体缩放,上下左右拉动等. 手机屏幕触摸事件的监听方法: 1.首先要设置一块布局区域,frameLayout/LinearLayout等都可以,并为布局设置id: 2.在Activity中声明相应的布局类型,并通过findViewById()方法找到该布局,然后为该布局区域设置setOnTouchListener()方法,就能监听在相应屏幕触摸操作 实现屏幕触摸事件监听的代码: private LinearLayout Land;

Apache配置多个监听端口和不同的网站目录的简单方法

一种方法: 1,在httpd.conf 主配置问文件中定义监听端口 Listen 80  Listen 8080 2,在虚拟主机配置文件中添加如下,如下为参考配置: NameVirtualHost *:80<VirtualHost *:80> # ServerAdmin [email protected] DocumentRoot "/data/web/" ServerName 120.25.208.128 ServerAlias www.jxcia.1.com Error

[iOS 技巧 -11] 监听控件的一些情况 所采取的方法

//监听控件的一些情况:1.addtaget 2.设置代理(常见事件) 3.通知(控件发出通知)

Oracle非默认监听的处理会遇到的问题以及处理方法

第一种情况:只是修改默认端口 1.当前监听状态: C:\Windows\system32>lsnrctl status LSNRCTL for 64-bit Windows: Version 11.2.0.1.0 - Production on 05-3月 -2015 11:48:45 Copyright (c) 1991, 2010, Oracle. All rights reserved. 正在连接到 (DESCRIPTION=(ADDRESS=(PROTOCOL=TCP)(HOST=zen