怎么在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="ngRepeatFinished">
    <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) {
    //you also get the actual event object
    //do stuff, execute functions -- whatever...});

这样你就可以用js找到ng-repeat生成的元素了;并进行相关元素操作。
时间: 2024-08-05 22:55:36

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

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

在AngularJS中,操作DOM一般在指令中完成,事件监听机制是在对于已经静态生成的dom绑定事件,而如果在指令中动态生成了DOM节点,动态生成的节点不会被JS事件监听. 举例来说: angular.module('myapp',[]) .directive('myText',function(){ return{ restrict:'A', template:'<div ng-click="hello()">Hi everyone</div>', link:

WPF开发日记—解决拖动行为附加到元素上的延迟

此文的前提是 结合ItemsControl在Canvas中动态添加控件的最MVVM的方式 上一篇博客讲到了我通过使用 ItemsControls 内部设置Canvs为布局面板 并在ItemContainerStyle中设置Canvs.Left, Canvas.Top. 来实现设置MVVM模式下自定义位置显示单项内容的功能. 接下来的一步要显示内容的拖动. 很抱歉的告诉大家,经过这两天的探索,我打算推翻上面的做法. 虽然可以这样用,学到了些东西,但是效果并不是很好. 原因在于,当后面我需要给 It

jQuery获取动态生成的元素

需求描述:页面上可以动态添加数据,比如table,点击按钮可以动态添加行.又或页面 加载时table数据是通过ajax从后台获取的.而这时我们想要获取其中的某个值,又该如何获取呢? 如果是要通过某个事件来获取的比如click,mouseover等等,则可以使用live()方法 $(".button").live("click",function(){ console.info($("#mytd").html()); }) live()的详细说明参

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

问题:很多时候发现,对动态生成的元素绑定click事件是无效的- 原因:直接绑定到动态生成的元素是无效的,是因为Jquery扫描文档找出所有的$(‘’)元素,并把函数绑定到每个元素的click事件上,表明是现有页面上存在的元素,动态生成的元素不包括在内. 解决方法:代理或者说是委托on( ),实现原理是事件的冒泡,在指定的祖先元素中注册事件,元素事件触发,传播到这个元素然后进行筛选. 可以在祖先元素中绑定事件,比如div是祖先元素,而新生成的元素都是div的子元素,所以动态生成的元素的事件就可以

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

2)JS动态生成HTML元素的爬取 import java.util.List; import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebElement; import cn.edu.hfut.dmic.webcollector.crawler.DeepCrawler; import cn.edu.hfut.dmic.webcollector.model.

解决jquery 动态生成的元素的事件无法绑定

一.错误示例:对于自己用脚本动态生成的元素,无法绑定事件.例如: body下的代码: <body> <ul>     <li><span class="class1">11111</span></li>     <li><span class="class1">22222</span></li>     <li><span cla

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

主要原因:在页面给元素注册点击事件的时候[ $(function () {  XXX }); ],JS动态生成的元素还尚未生成,所以click事件就没有生效 解决方法: 方案一:js动态生成元素后再给其注册事件 [注册事件放在动态生成的js下面(js是从上往下执行的,当注册事件的时候元素已经生成了,就不会出现注册失效的现象了)] 话比较抽象举个例子: 方案二:js动态生成元素的时候给他加上 onClick之类的方法  举个例子: 如果你又更好的方案,那小子受教了~~

2016-06-02 获取系统当前日期和时间并显示在某个元素上

1. <script> window.onload=function(){ getDateAndTime(); setInterval(getDateAndTime,1000); } //获取系统的日期和时间并显示在某个元素上 function getDateAndTime(){ var myDate = new Date(); var year = myDate.getFullYear(); var month = myDate.getMonth()+1; var day = myDate.

如何用js为动态生成的元素绑定事件

今天在开发项目的时候,需要为用js动态生成的元素绑定一个click事件,但是在页面加载之前,这个元素不存在,没法获取这个元素,然后为其添加事件.查阅jquery api 发现可以用on()事件(注意:新版本的jquery已经把live()去除,现在用on()),为动态生产的元素绑定事件,然后触发该事件执行.比如下面一个例子: 假设我们要给div动态添加的span绑定click事件形成如下结果 x //做法如下: ("#choose_result").on("click&quo