AngularJS监听ng-repeat渲染完成的方法


Posted in Javascript onMarch 20, 2018

某个项目,我的网页中有一个列表<ul>元素,样式如下:

AngularJS监听ng-repeat渲染完成的方法

实际上它是通过Angular的ng-repeat形成的,html中的代码是:

<li ng-repeat="for list in lists()" id="{{ list.id }}">{{ list.name }}</li>

图中下方的新建清单button,点击之后就往lists数组中push了一个新的list对象,此时页面会自动渲染,也对应增加一个<li>,如下:

AngularJS监听ng-repeat渲染完成的方法

注意MyList1一直是active状态的(class="active"),我的需求是新增list后,把新增的list设置为active,即在新增后就变成下面这种样式:

AngularJS监听ng-repeat渲染完成的方法

刚开始我尝试在button对应的函数中,往lists数组中push了新的list对象后,使用document.getElementById获取到新增的<li>对象,然后为其添加一个class="active",结果发现获取到的DOM对象为null,经过搜索发现原因是:往lists数组push对象后,数组发生改变,所有的<li>都会重新渲染,在push完成之后马上去找新增的DOM对象,DOM还没渲染好,因此是获取不到的。解法是:使用AngularJS的指令去监听ng-repeat是否渲染完成,在渲染完成后,再去取新增的<li>对象,这个网上有很多相关的内容了,代码如下:

myapp.directive('repeatFinish', function ($timeout) {
  return {
    restrict: "C",
    link: function (scope, element, attr) {
      if(scope.$last === true){
        $timeout(function () {
          scope.change_list(element[0]);
        }, 10);
      }
    }
  }
});

上述代码建立了一个名为repeatFinish的指令,restrict: "C"表示指令放在DOMclass中(驼峰形式,即class="repeat-finish"),scope.$last === true表示已经渲染到了最后一个对象,此时执行change_list函数(定义在控制器中,功能是把当前active的对象取消active,然后设置传入的DOM对象为active),element[0]可以直接取到当前渲染的DOM元素。注意我使用了$timeout10ms后执行change_list,我发现直接使用change_list还是会找不到DOM,原因不明,期待大神解答。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript与C# Windows应用程序交互方法
Jun 29 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
Oct 24 Javascript
学习JavaScript设计模式之责任链模式
Jan 18 Javascript
JSON字符串转换JSONObject和JSONArray的方法
Jun 03 Javascript
JS实现弹出居中的模式窗口示例
Jun 20 Javascript
JavaScript中apply方法的应用技巧小结
Sep 29 Javascript
JS回调函数简单用法示例
Feb 09 Javascript
bootstrap精简教程_动力节点Java学院整理
Jul 14 Javascript
Angular使用动态加载组件方法实现Dialog的示例
May 11 Javascript
用Vue编写抽象组件的方法
May 06 Javascript
VUE+elementui面包屑实现动态路由详解
Nov 04 Javascript
Element Card 卡片的具体使用
Jul 26 Javascript
vue对storejs获取的数据进行处理时遇到的几种问题小结
Mar 20 #Javascript
webpack本地开发环境无法用IP访问的解决方法
Mar 20 #Javascript
解决vue-router中的query动态传参问题
Mar 20 #Javascript
vue数据传递--我有特殊的实现技巧
Mar 20 #Javascript
手写Node静态资源服务器的实现方法
Mar 20 #Javascript
JS 实现缓存算法的示例(FIFO/LRU)
Mar 20 #Javascript
react-native封装插件swiper的使用方法
Mar 20 #Javascript
You might like
PHP利用func_get_args和func_num_args函数实现函数重载实例
2014/11/12 PHP
PHP原生函数一定好吗?
2014/12/08 PHP
php中最简单的字符串匹配算法
2014/12/16 PHP
WordPress中用于获取文章信息以及分类链接的函数用法
2015/12/18 PHP
Zend Framework教程之连接数据库并执行增删查的方法(附demo源码下载)
2016/03/21 PHP
人脸识别测颜值、测脸龄、测相似度微信接口
2016/04/07 PHP
ThinkPHP框架中使用Memcached缓存数据的方法
2018/03/31 PHP
jQuery技巧总结
2011/01/01 Javascript
JavaScript中的几个关键概念的理解-原型链的构建
2011/05/12 Javascript
jquery实现控制表格行高亮实例
2013/06/05 Javascript
文本框中禁止非数字字符输入比如手机号码、邮编
2013/08/19 Javascript
JavaScript通过setTimeout实时显示当前时间的方法
2015/04/16 Javascript
浅谈Jquery为元素绑定事件
2015/04/27 Javascript
JavaScript中操作字符串之localeCompare()方法的使用
2015/06/06 Javascript
JavaScript实现跨浏览器的添加及删除事件绑定函数实例
2015/08/04 Javascript
在Node.js中使用Javascript Generators详解
2016/05/05 Javascript
JavaScript中两个字符串的匹配
2016/06/08 Javascript
js select实现省市区联动选择
2020/04/17 Javascript
jQuery实现磁力图片跟随效果完整示例
2016/09/16 Javascript
Vue 进入/离开动画效果
2017/12/26 Javascript
JS匿名函数和匿名自执行函数概念与用法分析
2018/03/16 Javascript
vue axios数据请求get、post方法及实例详解
2018/09/11 Javascript
JavaScript实现多个物体同时运动
2020/03/12 Javascript
JS中队列和双端队列实现及应用详解
2020/09/29 Javascript
Python选择排序、冒泡排序、合并排序代码实例
2015/04/10 Python
简单的python后台管理程序
2017/04/13 Python
Python 调用Java实例详解
2017/06/02 Python
Python温度转换实例分析
2018/01/17 Python
Python Django搭建网站流程图解
2020/06/13 Python
西班牙香水和化妆品购物网站:Arenal Perfumerías
2019/03/01 全球购物
学生生病请假条范文
2014/02/16 职场文书
新闻编辑求职信
2014/04/09 职场文书
创建青年文明号材料
2014/05/09 职场文书
员工工作表现自我评价
2015/03/06 职场文书
《打电话》教学反思
2016/02/22 职场文书
来探秘“德国中小企业”的成功之道
2019/07/26 职场文书