Angular Directive 学习
学习目的:为了更好的了解 ng directive 的使用方法。
Directive可能是AngularJS中比较复杂的一个东西了。一般我们将其理解成指令。AngularJS自带了不少预设的指令,比如ng-app,ng-controller这些。可以发现个特点,AngularJS自带的指令都是由ng-打头的。
那么,Directive究竟是个怎么样的一个东西呢?我个人的理解是这样的:将一段html、js封装在一起,形成一个可复用的独立个体,具体特定的功能。下面我们来详细解读一下Directive的一般性用法。
AnguarJS directive的常用定义格式以及参数说明
看下面的代码:
var myDirective = angular.module('directives', []);
myDirective.directive('directiveName', function($inject) {
return {
template: '<div></div>',
replace: false,
transclude: true,
restrict: 'E',
scope: {},
controller: function($scope, $element) {
},
complie: function(tElement, tAttrs, transclude) {
return {
pre: function preLink(scope, iElement, iAttrs, controller) {
},
post: function postLink(scope, iElement, iAttrs, controller) {
}
};
},
link: function(scope, iElement, iAttrs) {
}
};
});
复制代码
这里直接return了一个object,对象中包括比较多的属性,这些属性都是对自定义directive的定义。详细的含义,下面会继续说明。
return对象参数说明
return {
name: '',
priority: 0,
terminal: true,
scope: {},
controller: fn,
require: fn,
restrict: '',
template: '',
templateUrl: '',
replace: '',
transclude: true,
compile: fn,
link: fn
}
复制代码
如上所示,return的对象中会有很多的属性,这行属性都是用来定义directive的。 |