2014-08-26 08:23 JustRun 阅读(9252) 评论() 收藏 举报
AngularJs是Google开源的前端JS框架。使用AngularJs, 我们能够容易地、健壮的开发出类似于Gmail一样的单页Web应用。AngularJs这个新兴的MVC前端框架，具有以下特点: MVC, 模块化，自动化双向数据绑定，语义化标签、依赖注入等。
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中的内容。
当我们使用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%',
});
});
如果，您认为阅读这篇博客让您有些收获，不妨点击一下右下角的【推荐】按钮。
如果，您希望更容易地发现我的新博客，不妨点击一下右下角的【关注 Justrun】。
因为，我的写作热情也离不开您的肯定支持。
感谢您的阅读，这里还有你可能感兴趣的文章推荐博客文章。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。