ng的directive从字面上理解就是ng框架的一个指令。
假如我们发现要写很多公共或是重用的dom、class、attr属性或是需要操作scope作用域,就要考虑代码最好不要copy、不要出现重复的代码段,好像是哪位大牛说的话,具体记不清了,反正就是为了性能优化等方面。
说的更专业点就是:
直接上代码:
<!DOCTYPE html>
<html ng-app="nick">
<head>
<meta charset="UTF-8">
<title>nick directive</title>
</head>
<body>
<hi></hi>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
var myModule = angular.module('nick',[]);
myModule.directive('hi', function() {
return {
template: '<p>my name is nick</p>',
replace: true,
restrict: 'E',
};
});
</script>
</body>
</html>
这就是我们常用的最简单的写法,其实有2种写法。
var myModule = angular.module();
myModule.directive('directiveName', function() {
return {
//内容
};
});
var myModule = angular.module();
myModule.directive('directiveName', function() {
var myObj={
//内容
};
return myObj;
});
一般我们都是用第一种写法,下面以写法一为例:
var myModule = angular.module();
myModule.directive('directiveName', function() {
return {
priority: 0,
template: '<p>nick</p>',
templateUrl: 'nick.html',
replace: true,
transclude: true,
restrict: 'E',
scope: false,
controller:'someController',
controllerAs:'mainController',
compile: function compile(meElement, meAttrs, transclude) {
return {
pre: function preLink(scope, iElement, iAttrs, controller) {},
post: function postLink(scope, iElement, iAttrs, controller) { }
}
},
link: function postLink(scope, iElement, iAttrs) { }
};
});
这是我总结出目前directive最全的参数了。下面对参数进行一一介绍:
自定义directive指令的名字,应该做到见名知义,方便调用。
(Number),可选参数(作为了解,使用几率极小)指明指令的优先级,当有多个directive定义在同一个DOM元素时,有时需要明确它们的执行顺序。这属性用于在directive的compile function调用之前进行排序。如果优先级相同,则执行顺序是不确定的(经初步试验,优先级高的先执行,同级时按照类似栈的“后绑定先执行”。另外,测试时有点不小心,在定义directive的时候,两次定义了一个相同名称的directive,但执行结果发现,compile或者link都执行)。
(String)可选参数,指明指令在DOM的声明形式;
取值:
默认值为A;可以多个一起用,如EA.表示即可以是元素也可以是属性。
(Sting或Function) 可选参数,如果replace为true,则将模版内容替换当前的HTML元素,并将原来元素的属性、class一并迁移;如果为false,则将模版元素当作当前元素的子元素处理。
<!DOCTYPE html>
<html ng-app="nick">
<head>
<meta charset="UTF-8">
<title>nick directive</title>
</head>
<body>
<hi></hi>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
var myModule = angular.module('nick',[]);
myModule.directive('hi', function() {
return {
restrict: 'E',
template: '<div><h1>Hi nick</h1></div>',
replace: true
};
});
</script>
</body>
</html>
虽然写法一为常用写法,但是写法二也应该了解。亲们,发现了么?写法二使用到了html中hi2标签的title属性。
(Sting或Function) 可选参数,如果replace为true,则将模版内容替换当前的HTML元素,并将原来元素的属性、class一并迁移;如果为false,则将模版元素当作当前元素的子元素处理。但模版通过指定的url进行加载。因为模版加载是异步的,所以compilation、linking都会暂停,等待加载完毕后再执行。
注意:
在本地开发时候,需要运行一个服务器,不然使用templateUrl会报错 Cross Origin Request Script(CORS)错误。由于加载html模板是通过异步加载的,若加载大量的模板会拖慢网站的速度,这里有个技巧,就是先缓存模板你可以再你的index页面加载好后,将下列代码作为你页面的一部分包含在里面。
<!DOCTYPE html>
<html ng-app="nick">
<head>
<meta charset="UTF-8">
<title>nick directive</title>
</head>
<body>
<hi></hi>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('nick', []);
app.directive('hi', function() {
return {
restrict: 'E',
templateUrl: 'hi.html',
replace: true
};
});
</script>
<script type='text/ng-template' id='hi.html'>
<div><h1>Hi nick</h1></div>
</script>
</body>
</html>
(Boolean),默认值为false,设置为true时候,hi这个标签不在了,反之,则存在。这里比较简单,就不上代码了。