栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

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

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

详解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),这些标签在浏览器加载完页面后被执行。举例来说:

Id Name Salary
{{user.Id}} {{user.Name}} {{user.Salary}}

上面的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:


   {{user.Id}}
   {{user.Name}}
   {{user.Salary}}

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持考高分网。

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/91280.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号