关闭

如何监听Angularjs列表数据是否渲染完毕,配合jQuery操作DOM,指令的规范

标签: angularjs
2331人阅读 评论(0) 收藏 举报
分类:

AngularJs和Jquery的有什么不同?

Jquery的主要目的是简化Js编写,专注于浏览器跨平台,主要用来操作DOM.
AngularJs主要关注Html数据的获取和呈现,以及应对日益复杂的Web应用需求,使得开发庞大的Web应用能够更加容易。

情景:在做物流信息的时候,最新的信息要有最新的标签。但是angularjs是异步加载,在页面循环数据的时候,取标签$("#logistics_ul li") 是不会取到的(下图的ul标签id)。那么有什么方法来判断页面的数据是否渲染完毕,从而用jQuery来操作DOM呢。

解决方案参考 http://www.itnose.net/detail/6100484.html

controller


         //返回的数据(json) 加一个元素 快递公司
            date[0].Express_Com=condata.logisticsname($rootScope.logistics_info.shippercode);
           $scope.logistic = date[0];


           $scope.$on('ngRepeatFinished', function (ngRepeatFinishedEvent) {
              //下面是在table render完成后执行的js
              $("#logistics_ul li:last span").before("<span class='fr mjc-lv '>最新 !</span>")

          });

html页面


          <div class="pad_05 bg_op_07 mt_05">
              <ul id="logistics_ul" class="pad_05" >
                  <li class="overhide mt_2" ng-repeat="data in logistic.Traces" on-finish-render-filters >
                        <span class="logistic_top">&nbsp;</span>
                        <div class="pad_05 logistic_left">
                            <div>{{data.AcceptTime}}</div>
                            <div class="bd_bottom_black">{{data.AcceptStation}}</div>
                        </div>

                  </li>
              </ul>
          </div>

directive


.directive('onFinishRenderFilters',['$timeout', function ($timeout) {
    return {
        restrict: 'A',
        link: function(scope, element, attr) {
            if (scope.$last === true) {
                $timeout(function() {
                    scope.$emit('ngRepeatFinished');
                });
            }
        }
    };
}]);

看看效果
这里写图片描述

但是html用的是on-finish-render-filters怎么就匹配到directive里面的onFinishRenderFilters

http://www.hubwiz.com/class/54f3ba65e564e50cfccbad4b

指令的规范化

AngularJS在进行匹配检测之前,首先对HTML元素的标签和属性名转化成规范的驼峰式字符串:
  1. 去除名称前缀的x-和data-

  2. 以: , - 或 _ 为分割符,将字符串切分成单词,除第一个单词外,其余单词首字母大写

  3. 重新拼接各单词

    例如,下面的写法都等效地匹配ngBind指令:

<span ng-bind="name"></span> <br/>
<span ng:bind="name"></span> <br/>
<span ng_bind="name"></span> <br/>
<span data-ng-bind="name"></span> <br/>
<span x-ng-bind="name"></span> <br/>

所以,我的on-finish-render-filters被规范为onFinishRenderFilters

1
0
查看评论

jQuery Carousel with Angular ng-repeat

jQuery Carousel with Angular ng-repeat问题, 在使用ng-repeat循环加载一组图片时,carousel图片轮播插件失效, 原因是jquery 获取DOM元素需要在ng-repeat循环加载渲染结束后进行。
  • qweileen
  • qweileen
  • 2016-09-19 15:57
  • 229

AngularJS中,如何给动态生成的元素绑定事件

1 . 我们知道在jquery中,动态生成一个元素,如果要在动态生成元素的同时,动态绑定事件,可以通过live/on方法(在jquery3.0中已经废除了bind方法)。 2 . 在angularjs中,操作DOM一般在指令中完成,事件监听机制是在对于已经静态生成的dom绑定事件,而如果在指令中动...
  • liwusen
  • liwusen
  • 2016-07-31 14:25
  • 15875

ionic开发——Angularjs页面渲染完成在执行指定操作的方法

在ionic开发中,我们有的方法需要在页面渲染之后在执行,而一般js代码在页面渲染之前就执行了,所以有些东西没有实现。 下面的方法可以实现这个功能: 这里用ng-repeat举例: html的View里面: dummy Text 我们需要添加一个指令 direc...
  • yu17310133443
  • yu17310133443
  • 2017-07-06 17:04
  • 999

判断AngularJS渲染页面完成

写demo的时候需要调整页面高度,之前用jquery的时候一直是 $(document).ready() 来判断页面渲染完成 但是到了angularjs之后,不起作用…………
  • xinshangshangxin
  • xinshangshangxin
  • 2015-03-28 13:34
  • 24893

$watch--angularJs的监听事件

上一篇介绍了angular的一个应用----双向数据绑定,本篇介绍angular的另一个应用---监听事件,该监听功能是angular自带的,也比较实用。监听功能定义在了$scope里,前面说过,$scope就相当于作用域,表示在当前页面有效,当然, 你也可以把理解为一个空间或一个容器,angula...
  • zwr20105255
  • zwr20105255
  • 2017-04-12 23:46
  • 2061

AngularJs渲染完毕后执行指定操作

最近用AngularJs做了一个Web的项目,AngularJs的设计真的很适合CRUD。真的建议很多内部的提高生产力的工具转而采用Web,以AngularJs为框架。 通常的Web程序,我们需要在页面加载完成的时候执行某些特定的操作,在没有AngularJs的时候一般采用的是监听onLoad e...
  • u013613428
  • u013613428
  • 2016-07-27 11:17
  • 16293

《AngularJS》--监听angularjs列表数据是否渲染完毕

小编在项目中遇到这样一个需求,利用AngularJS在手机页面双向绑定一些数据,而且这些数据是以列表的形式展现出来的,当这些数据渲染完成之后,需要在列表上面加载一些图片,而且这些图片是不断的自动切换。想来想去,于是就用到了自己定义的指令,下面是具体的代码。   1、HTML代码
  • u013067402
  • u013067402
  • 2016-06-18 08:52
  • 3549

angularJs监听ng-repeat渲染完成

监听ng-repeat渲染完成有两种方法 一、最实用的方法: 对应作用域controller: $scope.completeRepeate= function(){alert('1...
  • jimolangyaleng
  • jimolangyaleng
  • 2016-12-23 11:03
  • 2854

关于angularjs中,数据模型被改变,页面不刷新的解决办法

刚用angularjs时,确实被它的双向数据绑定震住了,但同时没有完合使用angularjs的方法,从而出现数据模型被改变,但页面不能随之更改,需要$scope.$apply()强制更新数据模型. 实际上出现这种情况,就是因为在angularjs中使用了JS方法产生数据源,看下面代码: var my...
  • baby97
  • baby97
  • 2015-12-16 16:43
  • 33771

angularjs 删除循环中的 promise 数据之后立马显示变化

在用 restangurlar 来跟后台 api 交互的时候,删除一条记录,但是直接显示在页面中。第三方异步的数据没办法立即同步,如果要看到删除的结果要重新刷新页面的话就太不 cool 了,google 了一把找到解决方法。原始 js 代码如下:.controller('HostCtrl&#...
  • qcpm1983
  • qcpm1983
  • 2015-02-03 15:22
  • 2203
    个人资料
    • 访问:95929次
    • 积分:1406
    • 等级:
    • 排名:千里之外
    • 原创:37篇
    • 转载:55篇
    • 译文:1篇
    • 评论:4条
    最新评论