Angular Directive 学习
Directive可能是AngularJS中比较复杂的一个东西了。一般我们将其理解成指令。AngularJS自带了不少预设的指令,比如ng-app,ng-controller这些。可以发现个特点,AngularJS自带的指令都是由ng-打头的。
那么,Directive究竟是个怎么样的一个东西呢?我个人的理解是这样的:将一段html、js封装在一起,形成一个可复用的独立个体,具体特定的功能。下面我们来详细解读一下Directive的一般性用法。
var myDirective = angular.module('directives', []);
myDirective.directive('directiveName', function($inject) {
return {
template: '',
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 {
name: '',
priority: 0,
terminal: true,
scope: {},
controller: fn,
require: fn,
restrict: '',
template: '',
templateUrl: '',
replace: '',
transclude: true,
compile: fn,
link: fn
}
如上所示,return的对象中会有很多的属性,这行属性都是用来定义directive的。
name
priority
teminal
scope
true
{}
require
restrict
template
templateUrl
replace
transclude
true/false
转换这个directive的内容。(这个感觉上,是直接将内容编译后搬入指定地方)‘element’
转换整个元素,包括其他优先级较低的directive。(像将整体内容编译后,当作一个整体(外面再包裹p),插入到指定地方)compile
link
这里关于directive的scope为一个object时,有更多的内容非常有必要说明一下。看下面的代码:
scope: {
name: '=',
age: '=',
sex: '@',
say: '&'
}
这个scope中关于各种属性的配置出现了一些奇怪的前缀符号,有=,@,&,那么这些符号具体的含义是什么呢?再看下面的代码:
<div my-directive name="myName" age="myAge" sex="male" say="say()">div>
复制代码
function Controller($scope) {
$scope.name = 'Pajjket';
$scope.age = 99;
$scope.sex = '我是男的';
$scope.say = function() {
alert('Hello,我是弹出消息');
};
}
复制代码
=
: 指令中的属性取值为Controller中对应$scope上属性的取值@
: 指令中的取值为html中的字面量/直接量&
: 指令中的取值为Controller中对应$scope上的属性,但是这个属性必须为一个函数回调 下面是更加官方的解释:=
或者=expression/attr
,widget的scope定义为:{localFn:’increment()’},那么isolate scope property localFn会指向一个包裹着increment()表达式的function。 一般来说,我们希望通过一个表达式,将数据从isolate scope传到parent scope中。这可以通过传送一个本地变量键值的映射到表达式的wrapper函数中来完成。例如,如果表达式是increment(amount),那么我们可以通过localFn({amount:22})的方式调用localFn以指定amount的值。
下面的示例都围绕着上面所作的参数说明而展开的。
// 自定义directive
var myDirective = angular.modeule('directives', []);
myDirective.directive('myTest', function() {
return {
restrict: 'EMAC',
require: '^ngModel',
scope: {
ngModel: '='
},
template: 'Weather for {{ngModel}}'
};
});
// 定义controller
var myControllers = angular.module('controllers', []);
myControllers.controller('testController', [
'$scope',
function($scope) {
$scope.name = 'this is directive1';
}
]);
var app = angular.module('testApp', [
'directives',
'controllers'
]);
复制代码
templateUrl其实根template功能是一样的,只不过templateUrl加载一个html文件,上例中,我们也能发现问题,template后面根的是html的标签,如果标签很多呢,那就比较不爽了。可以将上例中的,template改一下。
myDirective.directive('myTest', function() {
return {
restrict: 'EMAC',
require: '^ngModel',
scope: {
ngModel: '='
},
templateUrl:'../partials/tem1.html' //tem1.html中的内容就是上例中template的内容。
}
});
复制代码
//directives.js中定义myAttr
myDirectives.directive('myAttr', function() {
return {
restrict: 'E',
scope: {
customerInfo: '=info'
},
template: 'Name: {{customerInfo.name}} Address: {{customerInfo.address}}
' +
'Name: {{vojta.name}} Address: {{vojta.address}}'
};
});
//controller.js中定义attrtest
myControllers.controller('attrtest',['$scope',
function($scope) {
$scope.naomi = {
name: 'Naomi',
address: '1600 Amphitheatre'
};
$scope.vojta = {
name: 'Vojta',
address: '3456 Somewhere Else'
};
}
]);
// html中
"testApp">
<div ng-controller="attrtest">
<my-attr info="naomi">my-attr>
div>
body>
复制代码
Name: Naomi Address: 1600 Amphitheatre //有值,因为customerInfo定义过的
Name: Address: //没值 ,因为scope重定义后,vojta是没有定义的
myDirectives.directive('myAttr', function() {
return {
restrict: 'E',
template: 'Name: {{customerInfo.name}} Address: {{customerInfo.address}}
' +
'Name: {{vojta.name}} Address: {{vojta.address}}'
};
});
复制代码
Name: Address:
Name: Vojta Address: 3456 Somewhere Else
因为此时的directive没有定义独立的scope,customerInfo是undefined,所以结果正好与上面相反。
myDirective.directive('myEvent', function() {
return {
restrict: 'E',
transclude: true,
scope: {
'close': '$onClick' //根html中的on-click="hideDialog()"有关联关系
},
templateUrl: '../partials/event_part.html'
};
});
myController.controller('eventTest', [
'$scope',
'$timeout',
function($scope, $timeout) {
$scope.name = 'Tobias';
$scope.hideDialog = function() {
$scope.dialogIsHidden = true;
$timeout(function() {
$scope.dialogIsHidden = false;
}, 2000);
};
}
]);
复制代码
<body ng-app="phonecatApp">
<div ng-controller="eventtest">
<my-event ng-hide="dialogIsHidden" on-click="hideDialog()">
Check out the contents, {{name}}!
my-event>
div>
body>
<div>
<a href ng-click="close()">×a>
<div ng-transclude>div>
div>
复制代码
"phonecatApp">
"eventtest">
"dialogIsHidden" on-click="hideDialog()">
Check out the contents, {{name}}!
复制代码
controller
,link
,compile
之间的关系myDirective.directive('exampleDirective', function() {
return {
restrict: 'E',
template: 'Hello {{number}}!',
controller: function($scope, $element){
$scope.number = $scope.number + "22222 ";
},
link: function(scope, el, attr) {
scope.number = scope.number + "33333 ";
},
compile: function(element, attributes) {
return {
pre: function preLink(scope, element, attributes) {
scope.number = scope.number + "44444 ";
},
post: function postLink(scope, element, attributes) {
scope.number = scope.number + "55555 ";
}
};
}
}
});
//controller.js添加
myController.controller('directive2',[
'$scope',
function($scope) {
$scope.number = '1111 ';
}
]);
//html
"testApp">
<div ng-controller="directive2">
<example-directive>example-directive>
div>
body>
复制代码
Hello 1111 22222 44444 5555 !
由结果可以看出来,controller先运行,compile后运行,link不运行。 我们现在将compile属性注释掉后,得到的运行结果如下:
Hello 1111 22222 33333
!