发表于: 2017-06-05 21:10:45
1 1196
今天完成的任务:
1.学习了一波自定义指令(我还是打算把翻页封装):
自定义指令的大致模板(angularJS电子文档上面有详细介绍如何自定义指令的):
angular.module('docsTransclusionExample', [])
.controller('Controller', ['$scope', function($scope) {
$scope.name = 'Tobias';
}])
.directive('myDialog', function() {
return {
restrict: 'E',
scope: {},
templateUrl: 'my-dialog.html',
link: function (scope, element) {
scope.name = 'Jeff';
}
};
});
首先说说directive中的几个属性:
restrict
E: 表示该directive仅能以element方式使用,即:<my-dialog></my-dialog>
A: 表示该directive仅能以attribute方式使用,即:<div my-dialog></div>
EA: 表示该directive既能以element方式使用,也能以attribute方式使用
transclude
scope:写上该属性时,就表示这个directive不会从它的controller里继承$scope对象,而是会重新创建一个(电子文档上叫隔离作用域)。
templateUrl:directive里的html内容。
link:可以简单理解为,当directive被angular 编译后,执行该方法,link中的第一个参数scope基本上就是上面写的那个scope。
element:简单说就是$('my-dialog')
attrs:是个map,内容是这个directive上的所有属性,例如:页面上如果这样写了directive:
<my-dialog type="modal" animation="fade"></my-dialog>
那attrs就是:
{
type: 'modal',
animation: 'fade'
}
2.学习了ng-repeat中x in records track by $id(x)的用法(菜鸟教程唯独没有说这个的用法):
我们可以使用ng-repeat指令遍历一个JavaScript数组,但是当数组中有重复元素的时候,AngularJS就会报错,为什么呢?
这是因为ng-repeat不允许collection中存在两个相同Id的对象。
对于数字或者字符串等基本数据类型来说,它的id就是它自身的值。因此数组中是不允许存在两个相同的数字的。为了规避这个错误,需要定义自己的track by表达式。
// 业务上自己生成唯一的id
item in items track by item.id
//或者直接拿循环的索引变量$index来用
item in items track by $index
如果是javascript对象类型数据,那么就算内容一摸一样,ng-repeat也不会认为这是相同的对象。
3.学习了ng-class的用法:
在开发中我们通常会遇到一种需求:一个元素在不同的状态需要展现不同的样子。
而在这所谓的样子当然就是改变其css的属性,而实现能动态的改变其属性值,必然只能是更换其class属性
这里有三种方法:
第一种:通过数据的双向绑定(不推荐)
第二种:通过对象数组
第三种:通过key/value
明天计划的事情:
继续分页的编写,争取完成任务8
遇到的问题:
暂无
收获:
如何自定义指令
评论