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 相关文章推荐
dess中一个简单的多路委托的实现
Jul 20 Javascript
跨域请求之jQuery的ajax jsonp的使用解惑
Oct 09 Javascript
jQuery事件绑定.on()简要概述及应用
Feb 07 Javascript
js+html5绘制图片到canvas的方法
Jun 05 Javascript
JS数组去掉重复数据只保留一条的实现代码
Aug 11 Javascript
手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现
Aug 25 Javascript
JS中使用textPath实现线条上的文字
Dec 25 Javascript
基于vue打包后字体和图片资源失效问题的解决方法
Mar 06 Javascript
node.js使用redis储存session的方法
Sep 26 Javascript
详解VUE里子组件如何获取父组件动态变化的值
Dec 26 Javascript
vue-cli在 history模式下的配置详解
Nov 26 Javascript
vue 图片裁剪上传组件的实现
Nov 12 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
纯真IP数据库的应用 IP地址转化成十进制
2009/06/14 PHP
解析php dirname()与__FILE__常量的应用
2013/06/24 PHP
PHP基于CURL进行POST数据上传实例
2014/11/10 PHP
浅析Yii2 gridview实现批量删除教程
2016/04/22 PHP
laravel 操作数据库常用函数的返回值方法
2019/10/11 PHP
JAVASCRIPT对象及属性
2007/02/13 Javascript
JavaScript中反正弦函数Math.asin()的使用简介
2015/06/14 Javascript
Vue.js系列之项目结构说明(2)
2017/01/03 Javascript
js监听input输入框值的实时变化实例
2017/01/26 Javascript
vue.js的安装方法
2017/05/12 Javascript
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
2017/05/13 jQuery
基于Jquery Ajax type的4种类型(详解)
2017/08/02 jQuery
详解刷新页面vuex数据不消失和不跳转页面的解决
2018/01/30 Javascript
利用Console来Debug的10个高级技巧汇总
2018/03/26 Javascript
详解React项目如何修改打包地址(编译输出文件地址)
2019/03/21 Javascript
Vue模板语法中数据绑定的实例代码
2019/05/17 Javascript
vue如何自动化打包测试环境和正式环境的dist/test文件
2019/06/06 Javascript
在Python的Flask框架下使用sqlalchemy库的简单教程
2015/04/09 Python
wxPython中listbox用法实例详解
2015/06/01 Python
深入了解Python iter() 方法的用法
2019/07/11 Python
教你如何编写、保存与运行Python程序的方法
2019/07/12 Python
Python定时任务APScheduler的实例实例详解
2019/07/22 Python
python解析yaml文件过程详解
2019/08/30 Python
关于Python中定制类的比较运算实例
2019/12/19 Python
Python单例模式的四种创建方式实例解析
2020/03/04 Python
Russell Stover巧克力官方网站:美国领先的精美巧克力制造商
2016/11/27 全球购物
美国在线家居装饰店:Belle&June
2018/10/24 全球购物
Hoover胡佛官网:美国吸尘器和洗地机品牌
2019/01/09 全球购物
高中政治教学反思
2014/01/18 职场文书
农民工创业典型事迹
2014/01/25 职场文书
《乡愁》教学反思
2014/02/18 职场文书
销售员试用期自我评价
2014/09/15 职场文书
2014年党员评议表自我评价
2014/09/27 职场文书
防灾减灾宣传标语
2014/10/07 职场文书
Java实现多线程聊天室
2021/06/26 Java/Android
MySQL窗口函数的具体使用
2021/11/17 MySQL