angular&创建指令&指令对象

84 阅读 0 评论 56 点赞

我是靠谱客的博主动听季节，最近开发中收集的这篇文章主要介绍angular&创建指令&指令对象，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

创建指令

指令也是一种服务，只是这种服务的定义有几个特殊要求：

必须使用模块的directive（）方法注册服务
对象工厂必须返回一个指令定义的对象
指令在注入器种的登记名称是：指令名+Directive。例如ng-app指令的服务名称是:ngAPPDirective

指令定义对象

每个指令定义的工厂函数，需要返回一个指令定义对象
指令定义对象就是一个具有约定属性的javaScript对象，编译器$compile在编译时就根据这个定义对象对指令进行展开
指令定义对象的常用属性如下：

配置项	类型	含义
template	string	使用template指定的HTML标记替换指令内容（或指令自身）
restrict	string	用来限定指令在HTML模板种出现的位置(E,A,C,M)
replace	true，falset	是否替换原有的DOM元素
transclude	true,false,’element’	是否保留原有指令的内部元素
scope	true,false,{}	scope属性为指令创建私有的作用域
link	function	link属性是一个函数

link

<!DOCTYPE html>
<html ng-app="zz">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<span zz-c>我是span</span>
</body>
<script src="js/angular.js"></script>
<script type="text/javascript">
angular.module('zz',[])
.directive('zzC',function(){
return{
link:function(scope,element,attrs){
element.on('mouseover',function(){
element.css({outline:'#ff0000 dotted thick'});
}).on('mouseout',function(){
element.css({outline:'none'});
})
}
}
})
</script>
</html>

restrict

<!DOCTYPE html>
<html ng-app="zz">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<hell></hell>
<div hell></div>
<div class="hell"></div>
<!-- directive:hell -->
</body>
<script src="js/angular.js"></script>
<script type="text/javascript">
angular.module('zz',[])
.directive('hell',function(){
return{
replace:true,
restrict:'ECMA',
template:'<h1>hell</h1>'
}
})
</script>
</html>

scope绑定策略

类型	用法
@	把当前属性作为字符串传递，你还可以绑定来自外层scope上的值，从属性种插入{{}}即可
=	与父scope中的属性进行双向绑定
&s	传递一个来自父scope中的函数，稍后调用

complie和link

compile函数用来对模板自身进行转换，而link函数负责咋模型和视图之间进行动态关联
scope在链接阶段才会被绑定到编译之后的Link函数上
compile函数仅在编译阶段运行一次，而对于指令的每个实例，link函数只会返回postlink函数
如果需要修改dom结构，应该在postlink种做这件事情，如果在prelink中做这件事会导致错误
不成功时会保留原样，并在model增加一个$error对象

click

<!DOCTYPE html>
<html ng-app="zz">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body ng-controller="cc">
时间格式：<input type="text" ng-model="format" /></br>
当前时间:<span current-time="format"></span>
</body>
<script src="js/angular.js"></script>
<script type="text/javascript">
angular.module('zz',[]).controller('cc',function($scope){
$scope.format='M/d/yy h:mm:ss a';
}).directive('currentTime',function($interval,dateFilter){
return{
link:function(scope,element,attrs){
function upatetime(){
element.text(dateFilter(new Date(),scope.format));
}
$interval(function(){
upatetime();
},1000);
}
}
})
</script>
</html>

指令交互

<!DOCTYPE html>
<html ng-app="zz">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="js/bootstrap.min.css"/>
</head>
<body>
<div class="container">
<div class="jumbotron text-center">
<girl beautiful clever></girl>
{{desc}}
</div>
</div>
<script src="js/angular.js"></script>
<script type="text/javascript">
angular.module('zz',[]).directive('girl',function(){
return {
restrict:'E',
controller:function($scope,$element,$attrs){
$scope.desc=[];
this.add=function(char){
$scope.desc.push(char);
console.log($scope.desc)
}
},
template:'<h1>angular bb</h1>'
}
}).directive('beautiful',function(){
return {
restrict:'A',
require:'girl',
link:function(scope,element,attrs,grilCtrl){
grilCtrl.add('beautiful');
}
}
}).directive('clever',function(){
return {
restrict:'A',
link:function(scope,element,attrs){
scope.desc.push('clever');
}
}
})
</script>
</body>
</html>