这个问题其实对初学者来说,都 有这样的经历,用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. struts1 logic:iterate bean:write标签使用

    只是截取项目中部分代码,供参考及日后查阅 用struts1标签html:select 展现select下拉列表 刚开始为如下代码: <html:select name="Shuiwuj ...

  2. ArcEngine关于单位转换示例

    示例界面: 转换代码: private void Button1_Click(object sender, System.Windows.RoutedEventArgs e) { // Get the ...

  3. Kendo UI开发教程(7): Kendo UI 模板概述

    Kendo UI 框架提供了一个易用,高性能的JavaScript模板引擎.通过模板可以创建一个HTML片段然后可以和JavaScript数据合并成最终的HTML元素. Kendo 模板侧重于UI显示 ...

  4. C++malloc,calloc,realloc,free函数

    在进行C/c++编程的时候,需要程序员对内存的了解比较清楚,经常需要操作的内存可分为下面几个类别:     1.堆栈区(stack):由编译器自动分配与释放,存放函数的参数值,局部变量,临时变量等等, ...

  5. 菜单工具栏wxPython菜单与工具栏基础示例

    这两天一直在学习菜单工具栏之类的问题,上午正好有机会和大家讨论一下. 1.基本的api介绍 Package wx :: Class Menu Type Menu Method Summary Menu ...

  6. mongodb两次被黑后......

    先说说事情的经过...... 2017年1月8号星期天,在家翻头条无意中看到一条新闻说很多用户的mongodb被黑了,数据都被删了.当时想着公司的爬虫用的也是mongodb做存储,应该不会被黑吧,不可 ...

  7. js手机号批量滚动抽奖代码实现

    我们平时在看一些选秀节目或一些歌唱类比赛节目时经常会看到在现场的大屏幕上会有观众的手机号在滚动来选出谁是幸运观众或谁中了什么奖项,这些手机号都是现场观众或场外观众在给选手投票时产生的,当主持人一声开始 ...

  8. 结构-行为-样式-Js排序算法之 快速排序

    快速排序算法,是我的算法系列博客中的第二个Js实现的算法,主要思路:    在一个数组中随机取一个数(一般都取第一个或者最后一个),使这个数与数组中其他数进行比较,如果比它大就放到它的右边,比它小就放 ...

  9. C语言之算数运算符

    一 什么是算数运算符 算术运算符: +:  就是把两个数据相加,得到和 -:  就是把两个数据相减,得到差 *:  就是把两个数据相乘,得到积 /:  就是把两个数据相除,得到商 %:  就是把两个数 ...

  10. CentOS在线升级内核

    升级内核需要使用 elrepo 的yum 源首先我们导入 elrepo 的key  rpm –import https://www.elrepo.org/RPM-GPG-KEY-elrepo.org ...