angular1.0 如何监听页面渲染完毕 (转)

匿名 (未验证) 提交于 2019-12-03 00:22:01

Ant Design 提供了一套非常完整的 组件化设计规范 组件化编码规范,大幅提高了部分产品的设计研发效率及质量。Ant Design 与 G2 的代码质量和文档质量都非常高,算是阿里提出 “大中台,小前台” 后外面可见的杰出作品。

2:https://material.angular.io/

Google

有人说使用ng-init="";

事实上,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%',           }); });



标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!