怎么在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 ...
随机推荐
- socket网络编程快速上手(二)——细节问题(2)
2.TCP数据包接收问题 对初学者来说,很多都会认为:客户端与服务器最终的打印数据接收或者发送条数都该是一致的,1000条发送打印,1000条接收打印,长度都为1000.但是,事实上并不是这样,发送打 ...
- cocos2dx android lua文件设置问题
cocos2d-x版本: cocos2d-2.1rc0-x-2.1.2 通常我们在文件AppDelegate.cpp的applicationDidFinishLaunching()函数中设置lua代码 ...
- iOS UWebView详解
有时在项目中我们需要嵌入一些web相关的内容,这时你就要用到一个叫UIWebView的东西(UIWebView还可以打开一些文件等,如pdf等),在android和iOS中都有这个东西,使用起来也很方 ...
- SQL Server监控清单
SQL Server监控清单 一. 服务器1. 状态监控(1) 服务器是否可访问?(2) 相应的数据库服务是否启用?(3) 操作系统事件日志中的错误或告警(4) 磁盘可用空间 服务器状态监控,不管使用 ...
- 寻找两个已序数组中的第k大元素
寻找两个已序数组中的第k大元素 1.问题描述 给定两个数组与,其大小分别为.,假定它们都是已按照增序排序的数组,我们用尽可能快的方法去求两个数组合并后第大的元素,其中,.例如,对于数组,.我们记第大的 ...
- 【deep learning学习笔记】注释yusugomori的RBM代码 --- 头文件
百度了半天yusugomori,也不知道他是谁.不过这位老兄写了deep learning的代码,包括RBM.逻辑回归.DBN.autoencoder等,实现语言包括c.c++.java.python ...
- 基于Log4net插件
基本代码 using System; using System.Collections.Generic; using System.Linq; using System.Text; using log ...
- [置顶] Adapter详解
动态添加数据适配器adapter Adapter是适配器,许多UI组件需要搭配Adapter来显示界面,例如Spinner与ListView,另外当我们需要动态的添加数据给UI组件时就需要Adapte ...
- 典型关联分析(CCA)原理总结
典型关联分析(Canonical Correlation Analysis,以下简称CCA)是最常用的挖掘数据关联关系的算法之一.比如我们拿到两组数据,第一组是人身高和体重的数据,第二组是对应的跑步能 ...
- redis 学习笔记——数据同步、事务
redis主从同步 redis支持简单易用的主从复制(master-slave replication)功能,该功能也是redis高可用性实现的基础. redis复制原理 re ...