发表于: 2017-06-05 21:10:45

1 1195


今天完成的任务:

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

遇到的问题:

暂无

收获:

如何自定义指令





返回列表 返回列表
评论

    分享到