怎么在ng-repeat生成的元素上操作dom
这个问题其实对初学者来说,都 有这样的经历,用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 ...
随机推荐
- 不容易理解的 lock 和 merge
Hibernate:不容易理解的 lock 和 merge 目录 背景Lock官方的注释LockMode.NONELockMode.READLockMode.UPGRADEMerge官方注释detac ...
- 迟到的 WPF 学习 —— 控件
这一章书中内容比较多而杂,但每个对象的内容又相对简短,所以只挑选里边有代表性的内容做记录. 1. Label 控件:一个基础的简单的 ContentControl,Labe 支持快捷键文本的设置,可以 ...
- C# 添加敏感词
public class CheckStreamReader { //使用的数据: private static HashSet<string> hash = new HashSet< ...
- 使用PetaPoco结合注入实现业务级事务
使用PetaPoco结合注入实现业务级事务 PetaPoco是一个轻量级ORM,我的MVC项目中使用它结合Repository模式,依靠Unity的生命周期管理对象,保证请求/线程级别的数据上下文 ...
- 强烈推荐:240多个jQuery插件【转】
强烈推荐:240多个jQuery插件 概述 jQuery 是继 prototype 之后又一个优秀的 Javascript 框架.其宗旨是—写更少的代码,做更多的事情.它是轻量级的 js 库(压缩后只 ...
- jquery animate 详解
一.前言 继上一篇文章jquery stop的探索之后,我们继续对jquery动画animate的研究. 从stop给出参数我们就知道,它适合你去立即停止或者立即结束当前动画,清除或者继续非当前的动画 ...
- 横瓜执导众程序员开展大讨论关于C、JAVA及其它主流IT技术使用情况和优点缺点。
横瓜执导众程序员开展大讨论关于C.JAVA及其它主流IT技术使用情况和优点缺点. 遥执乾坤(44758121) 18:21:23 mysql据说只能使用一个索引,我这里几乎所有字段都有索引. 但每个 ...
- VB.NET调用SQL Sever存储过程
概要: 本文介绍VB.NET使用创建并调用带有输入参数和输出参数的SQL Sever存储过程 本文代码首先检查要创建的存储过程再数据库中是否存在在.如果不存在,则代码创建一个存储过程,该过程一个参数来 ...
- autotools入门笔记(二)——创建和使用静态库、动态库
带有静态库或者动态库的工程的构建过程与上一节()只包含一个源文件的工程的构建过程是类似的.只是对于复杂的工程,如果包含多个还有源文件的目录时,需要对每个包含源文件的目录执行构建过程,另外创建和使用库文 ...
- Java核心技术 卷Ⅰ 基础知识(2)
第四章 对象与类 基于类的访问权限 静态域 类的设计技巧