详解angular中如何监控dom渲染完毕

刚刚看到群上一个人说，他们公司凡是用angular和jquery插件一起用的人，都被解雇了，没看到这句话之前我很惭愧的说我有这样用过，其实angular的生态系统那么完善，完全可以不用去操作任何的dom元素都可以满足你的提倡开发需求。

那么如果真的需要用某个jquery插件，自己懒得封装angular插件或者懒得去找angular插件的时候，我们该怎么判断dom加载完毕。

有人说使用ng-init=""

亲测：表示没达到我想要的结果....

当然你如果使用window.onload=function(){}的话，不知道行不行，你可以去试试...

我们先了解一下angular的背景：

AngularJs是Google开源的前端JS框架。使用AngularJs, 我们能够容易地、健壮的开发出类似于Gmail一样的单页Web应用。AngularJs这个新兴的MVC前端框架，具有以下特点: MVC, 模块化，自动化双向数据绑定，语义化标签、依赖注入等。

angular和jquery有什么不同呢？

Jquery的主要目的是简化Js编写，专注于浏览器跨平台，主要用来操作DOM.

AngularJs主要关注Html数据的获取和呈现，以及应对日益复杂的Web应用需求，使得开发庞大的Web应用能够更加容易。

事实上，AnguarJs提供了一些对于Html进行加强的语义标签(directive)，这些标签在浏览器加载完页面后被执行。举例来说:

<table id=”leaderBoard”>
     <thead>
       <tr>
         <th>Id</th>
         <th>Name</th>
         <th>Salary</th>
       </tr>
     </thead>
     <tbody>
       <tr ng-repeat="user in users">
         <td>{{user.Id}}</td>
         <td>{{user.Name}}</td>
         <td>{{user.Salary}}</td>
       </tr>
     </tbody>
</table>

上面的ng-repeat，就是一个directive, 相当于一个for循环。在页面加载完成后，AngularJs会遍历users数据对象，来呈现(render)出这个table中的内容。

如何实现在render完成之后，执行Js脚本

当我们使用Jquery结合AngulraJs使用的时候，希望在render完table后，执行一段js脚本，把JqTable应用到该table上。在实际开发中，会经常碰到这样的需求，希望能够捕获到AngularJs渲染完成页面的事件。

要达到这个目的，我们需要为当前的app自定义directive:

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

然后，在我们需要监控的地方，加上该directive:

<tr ng-repeat="user in users" on-finish-render-filters>
   <td>{{user.Id}}</td>
   <td>{{user.Name}}</td>
   <td>{{user.Salary}}</td>
</tr>

最后，补充上我们需要render完成之后的Js脚本:

$scope.$on('ngRepeatFinished', function (ngRepeatFinishedEvent) {
     //下面是在table render完成后执行的js
     var table = $("#leaderBoard").dataTable({
       bJQueryUI: true,
       "sScrollX": '100%',
     });
});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法

    前言 在用AngularJS期间, 经常用到ng-repeat, 业务中有时需要在异步获取数据并用ng-repeat遍历渲染完页面后执行某个操作,angular本身并没有提供监听ng-repeat渲染完成的指令,所以需要自己动手写.有经验的同学都应该知道,在ng-repeat模板实例内部会暴露出一些特殊属性$index/$first/$middle/$last/$odd/$even,$index会随着每次遍历(从0开始)递增,当遍历到最后一个时,$last的值为true,so,通过判断$last

  • Angular ng-repeat遍历渲染完页面后执行其他操作详细介绍

    Angular ng-repeat遍历渲染 业务中有时需要在异步获取数据并用ng-repeat遍历渲染完页面后执行某个操作,angular本身并没有提供监听ng-repeat渲染完成的指令,所以需要自己动手写.有经验的同学都应该知道,在ng-repeat模板实例内部会暴露出一些特殊属性$index/$first/$middle/$last/$odd/$even,$index会随着每次遍历(从0开始)递增,当遍历到最后一个时,$last的值为true,so,通过判断$last的值来监听ng-rep

  • Angular.js中下拉框实现渲染html的方法

    Angular.js中下拉框实现渲染html的方法

    前言 大家都知道angualrjs处于安全的考虑,插值 指令会对相应字符串进行过滤,避免出现html攻击.但是在一些时候,我们需要渲染html,比如实现一个分级的下拉框 代码如下: <body ng-app="app" ng-controller="controller"> <select ng-model="value" ng-options="t.text for t in testList">&l

  • 详解angular中如何监控dom渲染完毕

    刚刚看到群上一个人说,他们公司凡是用angular和jquery插件一起用的人,都被解雇了,没看到这句话之前我很惭愧的说我有这样用过,其实angular的生态系统那么完善,完全可以不用去操作任何的dom元素都可以满足你的提倡开发需求. 那么如果真的需要用某个jquery插件,自己懒得封装angular插件或者懒得去找angular插件的时候,我们该怎么判断dom加载完毕. 有人说使用ng-init="" 亲测:表示没达到我想要的结果.... 当然你如果使用window.onload=f

  • 详解Angular中$cacheFactory缓存的使用

    最近在学习使用angular,慢慢从jquery ui转型到用ng开发,发现了很多不同点,继续学习吧: 首先创建一个服务,以便在项目中的controller中引用,服务有几种存在形式,factory();service();constant();value();provider();其中provider是最基础的,其他服务都是基于这个写的,具体区别这里就不展开了,大家可以看看源码:服务是各个controller之间通话的重要形式,在实际项目中会用的很多,下面是代码: angular.module

  • 详解angular 中的自定义指令之详解API

    自定义属性的四种类别 分为: 元素E,属性A,注释M,类C , 分别如下: <my-dir></my-dir> <span my-dir="exp"></span> <!-- directive: my-dir exp --> <span class="my-dir: exp;"></span> 简单创建一个指令 html结构: <div ng-controller="

  • 详解angular中通过$location获取路径(参数)的写法

    我最近在研究angular中通过$location获取路径(参数)的写法,在网上搜索了很多的资料,正好今天有时间,就整理一下! 以下获取与修改的 URL 以  ( http://172.16.0.88:8100/#/homePage?id=10&a=100  ) 为例 [一]获取 (不修改URL) //获取当前完整的url路径 var absurl = $locationabsUrl(); //http://88:8100/#/homePage?id=10&a=100 // 获取当前url

  • 详解Angular 中 ngOnInit 和 constructor 使用场景

    1. constructor constructor应该是ES6中明确使用constructor来表示构造函数的,构造函数使用在class中,用来做初始化操作.当包含constructor的类被实例化时,构造函数将被调用. 来看例子: class AppComponent { public name: string; constructor(name) { console.log('Constructor initialization'); this.name = name; } } let a

  • 详解Angular中实现自定义组件的双向绑定的两种方法

    在 Angular 中,对于表单元素,通过 [(ngModel)] 即可以简单地实现双向绑定.对于自定义组件而言,希望实现同样的效果可以怎么做呢? 1 实现自定义组件的 ngModel 指令 如果希望自定义组件能够具有与表单元素相同的 ngModel 效果,可以通过在组件内实现 ControlValueAccessor 接口达到目的. 对于 [(ngModel)] ,需要至少实现该接口的如下方法: interface ControlValueAccessor { writeValue(obj:

  • 详解angular中使用echarts地图

    目录 echart的初始化 app-base-chart组件 html css 使用app-base-chart组件 总结 在angular中使用echart的时候,只需要在对应的组件生命周期中调用echart的api就可以了 echart的初始化 在component的ngOnInit事件中进行echarts的初始化,配置option,然后echarts图表就生成了 app-base-chart组件 html <div #chart [ngClass]="'chart-box ' + (

  • 详解angular中的作用域及继承

    在一些使用angular框架的大型项目中,似乎有很多个controller,而每个controller都有自己的$scope. 1.$rootscope $rootScope顶级作用域,也叫根作用域,类似于window,window的属性在任何子作用域都可以访问.$rootScope则是所有controller进行数据沟通的中间域,即在$rootScope中的数据,在每个controller中都能通过$rootScope.xxx获取到. 2.$scope (1)作用 $scope 就在视图和控制

  • 详解Angular中的自定义服务Service、Provider以及Factory

    详解Angular中的自定义服务Service、Provider以及Factory

    背景来源于前段时间的一场面试,面试官看着我Angular控制器中添加各种功能重复的方法,脸都发绿了,不过还是耐心地跟我指出提高Angular代码复用性需要Service.Provider和Factory三种复用性很高的方法,遂习之,以下是我的学习成果: 先说说Factory: 通过注册.factory('my注册名',方法()),返回一个对象,你就能在控制器中引入这个方法并访问这个对象: 例子: <!-- factory模式 --> <div ng-controller="th

  • 详解Angular中通过$location获取地址栏的参数

    最近,项目开发正在进行时,心有点燥,许多东西没来得及去研究,今天正想问题呢,同事问到如何获取url中的参数,我一时半会还真没想起来,刚刚特意研究了一下,常用的方法就以下几种: 1.获取当前完整的url路径 var absurl = $location.absUrl(); //http://88:8100/#/homePage?id=10&a=100 2. 获取当前url路径(当前url#后面的内容,包括参数和哈希值) var url = $location.url(); // /homePage

随机推荐