这个问题其实对初学者来说,都 有这样的经历,用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的更多相关文章
-
给DOM生成的元素添加事件
问题:通过js给页面添加新元素,并给该元素添加绑定事件,但新添加的元素上却没有绑定任何事件. 常见例子:在处理表格的时候,每行行末有个删除按钮,如下图.点击删除按钮的时候删除这一行. //html部分 ...
-
JS动态生成的元素,其对应的方法不响应(比如单击事件,鼠标移动事件等)
主要原因:在页面给元素注册点击事件的时候[ $(function () { XXX }); ],JS动态生成的元素还尚未生成,所以click事件就没有生效 解决方法: 方案一:js动态生成元素后再给 ...
-
jQuery 绑定事件到动态创建的元素上
在进入主题之前,我们先来看一个前台页面经常用到的功能:点击页面输入框时自动选择其中文本. 很容易想到利用输入框的focus事件,当输入框获得焦点时,再调用jQuery的select()方法. Okay ...
-
2)JS动态生成HTML元素的爬取
2)JS动态生成HTML元素的爬取 import java.util.List; import org.openqa.selenium.By; import org.openqa.selenium.W ...
-
jQuery对于动态生成的元素绑定无效的问题~~
问题:很多时候发现,对动态生成的元素绑定click事件是无效的- 原因:直接绑定到动态生成的元素是无效的,是因为Jquery扫描文档找出所有的$(‘’)元素,并把函数绑定到每个元素的click事件上, ...
-
Angular如何给动态生成的元素绑定事件
在AngularJS中,操作DOM一般在指令中完成,事件监听机制是在对于已经静态生成的dom绑定事件,而如果在指令中动态生成了DOM节点,动态生成的节点不会被JS事件监听. 举例来说: angular ...
-
给DOM操作生成的元素添加事件
问题:通过js给页面添加新元素,并给该元素添加绑定事件,但新添加的元素上却没有绑定任何事件. 常见例子:在处理表格的时候,每行行末有个删除按钮,如下图.点击删除按钮的时候删除这一行. //html部分 ...
-
jquery给动态生成的元素绑定事件,on函数
首先先解释一下什么是动态生成的元素:动态生成的元素即我们用jquery的内部插入函数append()所生成的html代码.相对的也有静态生成的元素:即直接编写在页面的html代码. 下面通过例子来讲解 ...
-
AngularJS之一个元素上绑定多个指令作用域
前言 众所周知,我们在自定义指令时,会指定它的作用域,即scope设置项(默认值为false). 且,scope设置项,可以有三种值,从而也就代表三种不同的作用域,下面我们再来一起回顾下: 指令之sc ...
随机推荐
-
1092. To Buy or Not to Buy (20)
Eva would like to make a string of beads with her favorite colors so she went to a small shop to buy ...
-
Shortcut Collapse project or projects in the Solution Explorer Microsoft Visual Studio 2008
The standard windows keyboard shortcuts for expanding and collapsing treeviews are: Numeric Keypad * ...
-
python-property、docstring--笔记
已经有人总结的非常详细,而且写得不错,就直接贴过来用了 property作为装饰器函数,负责把一个方法变成属性调用的 廖雪峰关于property的讲解 http://www.liaoxuefeng.c ...
-
Mac安装Elasticsearch时提示:No Java runtime present, requesting install.
没有安装java的童鞋可以先去安装一下,地址:https://www.java.com/zh_CN/ 安装之后还是提示如下错误: ➜ elasticsearch-2.4.3 bin/elasticse ...
-
[HNOI2013]游走
题面在这里 题意 从1号点开始等概率选择路径并加上边权,直到到达n号点结束,要求将m条边赋权值1-m使得期望最小 sol 续上文 zsy ycb orz 简单的贪心:求出每条边的期望经过次数,sort ...
-
.net core实践系列之短信服务-Api的SDK的实现与测试
前言 上一篇<.net core实践系列之短信服务-Sikiro.SMS.Api服务的实现>讲解了API的设计与实现,本篇主要讲解编写接口的SDK编写还有API的测试. 或许有些人会认为, ...
-
CSDN-markdown编辑器语法——字体、字号与颜色
Markdown是一种可以使用普通文本编辑器编写的标记语言,通过类似HTML的标记语法,它可以使普通文本内容具有一定的格式.但是它本身是不支持修改字体.字号与颜色等功能的! CSDN-markd ...
-
Hanlp在java中文分词中的使用介绍
项目结构 该项目中,.jar和data文件夹和.properties需要从官网/github下载,data文件夹下载 项目配置 修改hanlp.properties: 1 #/Test/src/han ...
-
python标准库介绍——35 pipes 模块详解
==pipes 模块== (只用于 Unix) ``pipes`` 模块提供了 "转换管道 (conversion pipelines)" 的支持. 你可以创建包含许多外部工具调用 ...
-
Cordova 3.0 初步使用
主要参考 http://docs.phonegap.com/en/3.0.0/guide_cli_index.md.html#The%20Command-line%20Interface Cordov ...