详解angular中如何监控dom渲染完毕
作者：东京的樱花飘满巴黎
字体：[ ] 类型：转载 时间：
AngularJs是Google开源的前端JS框架。使用AngularJs, 我们能够容易地、健壮的开发出类似于Gmail一样的单页Web应用。这篇文章主要介绍了详解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”&
&th&Id&/th&
&th&Name&/th&
&th&Salary&/th&
&tr ng-repeat="user in users"&
&td&{{user.Id}}&/td&
&td&{{user.Name}}&/td&
&td&{{user.Salary}}&/td&
上面的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) {
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&
最后，补充上我们需要render完成之后的Js脚本:
$scope.$on('ngRepeatFinished', function (ngRepeatFinishedEvent) {
//下面是在table render完成后执行的js
var table = $("#leaderBoard").dataTable({
bJQueryUI: true,
"sScrollX": '100%',
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具Angularjs如何重新加载 ngtable 使用 $scope.tableParams.reload();？
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.
我正在使用中的吴表 angular js。我的问题是我不重新加载数据的表中删除一条记录。这是我的代码
myapp.controller('aamListAssignment', ['$scope', '$http', 'ngTableParams', function ($scope, $http, ngTableParams) {
$scope.data = [];
$scope.listPromise =
$scope.$watch("data", function () {
$scope.tableParams.reload();
$scope.list = function () {
$scope.listPromise = $http.get('./ccs/assignment/all').success(function (data) {
$scope.data =
$scope.tableParams = new ngTableParams({
page: 1, // show first page
// count per page
counts: [],
total: $scope.data.length, // length of data
getData: function ($defer, params) {
$defer.resolve($scope.data.slice((params.page() - 1) * params.count(), params.page() * params.count()));
$scope.removeAssignment = function (id) {
$scope.value =
$scope.Url = "./ccs/assignment/removeAssignment/" +
$http.get($scope.Url).success(function (data) {
console.log('after delete: ' + $scope.id);
// $location.path('aam/listAssignment/');
$scope.list();
$scope.list();
在控制台页中执行两种类型的错误发生的时间
"Error: $scope.tableParams is undefined..............
"Error: h.$scope is null..........
请帮我到这一问题。
我使用的另一种方式，这次重新加载工作正常，但分页不 working.the 代码是
myapp.controller('aamListAssignment', ['$scope', '$http', 'ngTableParams', function ($scope, $http, ngTableParams) {
$scope.tableParams = {};
$scope.data = [];
$scope.listPromise =
$scope.list = function () {
$scope.listPromise = $http.get('./ccs/assignment/all').success(function (data) {
$scope.data =
$scope.tableParams.reload();
$scope.tableParams = new ngTableParams({
page: 1, // show first page
// count per page
counts: [],
total: $scope.data.length, // length of data
getData: function ($defer, params) {
$defer.resolve($scope.data.slice((params.page() - 1) * params.count(), params.page() * params.count()));
$scope.removeAssignment = function (id) {
$scope.value =
$scope.Url = "./ccs/assignment/removeAssignment/" +
$http.get($scope.Url).success(function (data) {
console.log('after delete: ' + $scope.id);
$scope.list();
$scope.list();
解决方法 1:
如果你只是请求数据，然后只是分页在阵列上，那里是一定没问题，如果你需要分页的每个请求，然后看有没有，别忘了来遍历$data
&tr ng-repeat="user in $data"&
你应该在你的笨拙增加 total 调用，喜欢这里
total: data.length, // length of data
getData: function($defer, params) {
//need fo pagination!!
params.total(data.length);
$defer.resolve(data.slice((params.page() - 1) * params.count(), params.page() * params.count()));
你工作以上编辑相关文章推荐
AngularJs 刷新页面可采用下面的方式：首先先在控制器中注册$window，然后定义函数$scope.reloadRoute，在需要刷新页面的地方调用函数$scope.reloadRoute即可...
.state('page.xx', {
url: '/xx',
templateUrl: 'xxxx.html',
reload:true,
刚用angularjs时,确实被它的双向数据绑定震住了,但同时没有完合使用angularjs的方法,从而出现数据模型被改变,但页面不能随之更改,需要$scope.$apply()强制更新数据模型.
假如进入market/beian/add添加数据，保存提交后回退market/beian列表页，没有自动更新数据，必须得手动下拉刷新才会出来 $state.go("marketBeian",{},{r...
写demo的时候需要调整页面高度,之前用jquery的时候一直是 $(document).ready() 来判断页面渲染完成
但是到了angularjs之后,不起作用…………...
ng-cloak 指令用于在 AngularJS 应用在加载时防止 AngularJS 代码未加载完而出现的问题。
AngularJS 应用在加载时，文档可能会由于AngularJS 代码未加载完而出...
解决AngualrJS页面刷新导致异常显示问题
俗话说，细节决定成败，编程亦是如此。编程过程中我们可能会不自觉的忽视一些细节问题，殊不知，这些细节正是导致页面显示出现问题的...
使用自定义指令当ng-repeat加载完数据后执行js方法。实战案例：
问题：使用datatables+angular生成表格时，往往是循环去生成表体内容，而我们也需要当数据完全加载生成出来后再执行...
解决软键盘隐藏时，短暂出现黑块的情况在做项目的时候，一个界面的Edittext比较多，出现了在隐藏输入法软键盘的时候短暂的黑色区块，由于这个界面布局比较复杂，刚开始以为是因为界面复杂的原因造成卡顿现象...
1.场景重现
在controller中我们先默认给定model的值，然后调用了一个外部函数改变这个model的值，页面上没有变化，还是显示默认值。
2.原因分析
AngularJS只会关心在An...
他的最新文章
讲师：Array
讲师：李志伟
他的热门文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)判断AngularJS渲染页面完成 - sherryChang - 博客园
$scope.$on('$viewContentLoaded', function(){
$scope.$watch('$viewContentLoaded', function() {
阅读(...) 评论()
Copyright & sherryChang
Powered by:
模板提供：问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
下面的html是从controller中的messages中读取数据，页面渲染完成后数据更新，怎么使页面加载出更新的数据？ 这是一个类似于微信的聊天内容页面
&div class="message-wrapper" ng-repeat="message in messages" data-ng-init='messages'&
&!-- 自发消息模板 --&
&div style="position: top: 0; left: 0; text-align:" ng-if="user.id == message.id"&
&div class="chat-bublle right" style="border: 2 background-color: width: display: inline- padding: 4px 10 border-radius: 4 margin-right: 15 margin-top: 15 position: right: 0; top: 0"&
&div class="message"&&/div&
&div class="message-detail" style="max-width: 270 width: white-space:"&
&p class="bold" style="color: #word-break: break- text-align: margin: 4"&{{ message.text }}&/p&
&div class="message-biao" style="position: bottom: 12 right: -10"&
&span style="display:width: 0;height: 0;border-width: 6border-style:border-color: transparent tra position:top: 2 right: -3"&
&em style="display: width: 0; height: 0; border-width: 5 border-style: border-color: transparent tra position: top: 2 right: 3"&&/em&
&!-- 自发消息模板 End --&
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
数据是双向绑定的~ 控制器数据更新了 VIEW自动就更新了~~ VIEW更新数据，控制器的数据模型夜更新了。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
在controller中更新messages数组，页面就自动更新了。这么多行内样式，谁有心情给你仔细看呀。
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：