这个问题其实对初学者来说,都 有这样的经历,用ng-repeat生成的元素用js怎么也获取不到;这个其中原由是:angular拥有自动化渲染DOM的特性,它能帮助我们专注于操作数据,而页面的渲染则由angular自身来完成。这就造成了 ng-repeat 循环完成后angular并不会告诉我们dom渲染完了;换句话说就是不知道angular渲染dom何时完成(得不到生成的元素是因为这个元素还没有渲染出来)。

也就是说要找一个方法使你知道什么时候angular渲染dom完成了,你再才来操作dom,得到你想要的元素、进行操作。。。。

<div ng-repeat="item in items" on-finish>
<div>{{item.name}}}<div>
</div>

//js

var module = angular.module('fang', [])
.directive('onFinish', function ($timeout) {
return {
restrict: 'A',
link: function (scope, element, attr) {
if (scope.$last === true) {
$timeout(function () {
scope.$emit('ngRepeatFinished');
});
}
}
}});
$scope.$on('ngRepeatFinished', function(ngRepeatFinishedEvent) {
//这里写获取dom的操作,
});

这样你就可以用js找到ng-repeat生成的元素了;并进行相关元素操作。

怎么在ng-repeat生成的元素上操作dom的更多相关文章

  1. 给DOM生成的元素添加事件

    问题:通过js给页面添加新元素,并给该元素添加绑定事件,但新添加的元素上却没有绑定任何事件. 常见例子:在处理表格的时候,每行行末有个删除按钮,如下图.点击删除按钮的时候删除这一行. //html部分 ...

  2. JS动态生成的元素,其对应的方法不响应(比如单击事件,鼠标移动事件等)

    主要原因:在页面给元素注册点击事件的时候[ $(function () {  XXX }); ],JS动态生成的元素还尚未生成,所以click事件就没有生效 解决方法: 方案一:js动态生成元素后再给 ...

  3. jQuery 绑定事件到动态创建的元素上

    在进入主题之前,我们先来看一个前台页面经常用到的功能:点击页面输入框时自动选择其中文本. 很容易想到利用输入框的focus事件,当输入框获得焦点时,再调用jQuery的select()方法. Okay ...

  4. 2)JS动态生成HTML元素的爬取

    2)JS动态生成HTML元素的爬取 import java.util.List; import org.openqa.selenium.By; import org.openqa.selenium.W ...

  5. jQuery对于动态生成的元素绑定无效的问题~~

    问题:很多时候发现,对动态生成的元素绑定click事件是无效的- 原因:直接绑定到动态生成的元素是无效的,是因为Jquery扫描文档找出所有的$(‘’)元素,并把函数绑定到每个元素的click事件上, ...

  6. Angular如何给动态生成的元素绑定事件

    在AngularJS中,操作DOM一般在指令中完成,事件监听机制是在对于已经静态生成的dom绑定事件,而如果在指令中动态生成了DOM节点,动态生成的节点不会被JS事件监听. 举例来说: angular ...

  7. 给DOM操作生成的元素添加事件

    问题:通过js给页面添加新元素,并给该元素添加绑定事件,但新添加的元素上却没有绑定任何事件. 常见例子:在处理表格的时候,每行行末有个删除按钮,如下图.点击删除按钮的时候删除这一行. //html部分 ...

  8. jquery给动态生成的元素绑定事件,on函数

    首先先解释一下什么是动态生成的元素:动态生成的元素即我们用jquery的内部插入函数append()所生成的html代码.相对的也有静态生成的元素:即直接编写在页面的html代码. 下面通过例子来讲解 ...

  9. AngularJS之一个元素上绑定多个指令作用域

    前言 众所周知,我们在自定义指令时,会指定它的作用域,即scope设置项(默认值为false). 且,scope设置项,可以有三种值,从而也就代表三种不同的作用域,下面我们再来一起回顾下: 指令之sc ...

随机推荐

  1. FlexPaper+SWFTool+操作类=在线预览PDF(转)

    引言 由于客户有在线预览PDF格式的需求,在网上找了一下解决方案,觉得FlexPaper用起来还是挺方便的,flexpaper是将pdf转换为swf格式的文件预览的,所以flexpaper一般和swf ...

  2. IOS基础开发二(iphone计算器)

    今天做了个iphone的小例子计算器:才用mvc设计模式 项目目录: 代码如下: CalculatorViewController:(MVC的控制器) // CalculatorViewControl ...

  3. 公共建筑能耗监测平台的GPRS通讯服务器的开发方法分享

    公共建筑能耗监测平台的GPRS通讯服务器的开发方法分享 在这个文章里面我将用一个实际的案例来分享如何来构建一个能够接受3000+个连接的GPRS通讯服务器软件,这个软件被我认为是一个艺术品,实现周期为 ...

  4. PHP语言基础03 By ACReaper

    03.01逻辑运算符 &&,and ||,or xor 这里只强调一点用and或者or的话,记得加上括号,不然可能出错,至于原因我也不是很清楚,反正尽量直接用&&,|| ...

  5. [置顶] 使用Android OpenGL ES 2.0绘图之五:添加运动

    传送门 ☞ 系统架构设计 ☞ 转载请注明 ☞ http://blog.csdn.net/leverage_1229 传送门 ☞ GoF23种设计模式 ☞ 转载请注明 ☞ http://blog.csd ...

  6. 深入浅出学习Spring框架(四):IoC和AOP的应用——事务配置

    在前文 深入浅出学习Spring框架(一):通过Demo阐述IoC和DI的优势所在. 深入浅出学习Spring框架(三):AOP 详解 分别介绍了Spring的核心功能——IoC和AOP,光讲知识远远 ...

  7. VS2012下基于Glut OpenGL glScissor示例程序:

    剪裁测试用于限制绘制区域.我们可以指定一个矩形的剪裁窗口,当启用剪裁测试后,只有在这个窗口之内的像素才能被绘制,其它像素则会被丢弃.换句话说,无论怎么绘制,剪裁窗口以外的像素将不会被修改.有的朋友可能 ...

  8. 【原】tinker dex文件格式的dump工具tinker-dex-dump

    序言 Tinker是微信推出的热更新开源项目,同其它热更新方案相比具有补丁包小,支持类,so,资源文件的替换等优点.其中在类替换的方案里自主研发了DexDiff算法,使得补丁包变的更小.DexDiff ...

  9. 《DSP using MATLAB》示例Example6.4

    图形表达如下: 代码: b = [1, 0, 0, 0, 16+1/16, 0, 0, 0, 1]; [b0, B, A] = dir2cas(b, 1) 运行结果: 写成公式为

  10. JavaWeb开发中的乱码问题

    一,获取系统平台的默认编码 获取系统平台的默认编码: String encoding=System.getProperty("file.encoding"); 注:至于UTF-8编 ...