现在 angular 已经到5+ 了,目前公司有个 angular1.0 写的项目做迭代。现在angular 1. 版本都统称 angular.js 。最新angular 中文文档:https://www.angular.cn/ ;配合angular 使用的 比较好用的两个 组件库,有兴趣可以看文档
1:https://ng.ant.design/docs/introduce/zh
介绍: Ant Design 提供了一套非常完整的 组件化设计规范 与 组件化编码规范,大幅提高了部分产品的设计研发效率及质量。Ant Design 与 G2 的代码质量和文档质量都非常高,算是阿里提出 “大中台,小前台” 后外面可见的杰出作品。
2:https://material.angular.io/
介绍:Material Design,中文名:材料设计语言,是由Google推出的全新的设计语言,谷歌表示,这种设计语言旨在为手机、平板电脑、台式机和“其他平台”提供更一致、更广泛的“外观和感觉”。
解决问题!!!
问题描述:ng-repeat 了一组li,想在渲染后的第一个 li 上加样式。发现加不上,原因是 页面渲染延迟;
最笨应急方法 写个延时器,但是不建议用。
网上找了很多方法类似:
有人说使用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%',
});
});