本篇转载于:http://blog.csdn.net/evankaka
AngularJs GitHub: https://github.com/angular/angular.js/
AngularJs下载地址：https://angularjs.org/
此文接 AngularJs:Directive指令用法解读（上）
8、transclude
如果不想让指令内部的内容被替换，可以设置这个值为true。一般情况下需要ngTransclude指令一起使用。
<!DOCTYPE html>
<html lang="zh" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>AngularJS入门学习</title>
<script type="text/javascript" src="./1.5.3/angular.min.js"></script>
</head>
<body>
<div sidebox title="Links">
<ul>
<li>First Links</li>
<li>Second Links</li>
</ul>
</div>
</body>
<script type="text/javascript">
var app=angular.module('myApp',[]);
app.directive('sidebox',function(){
return {
restrict:'EA',
scope:{
title:'@'
},
transclude:true,
template:'<div class="sidebox">\
<div class="content">'\
<h2 class="header">{{title}}</h2>\
<span class=-"content" ng-transclude>\
</span>\
</div>\
</dvi>'
};
}) ;
</script>
</html>
结果：
image.png
当
transclude:false,时
image.png
**如果指令使用了transclude参数，那么在控制器无法正常监听数据模型的变化了。建议在函数里使用$watch
服务。
9、controller
可以是一个字符串或者函数。
若为字符串，则将字符串当做是控制器的名字，来查找注册在应用中的控制器的构造函数。
angular.module('myApp',[]).directive('myDirective',function(){
restrict:'A', //始终需要
controller:'SomeController'
})
//应用中其他的地方，可以是同一个文件或被index.html包含的另一个文件
angular.module('myApp').controller('SomeController',function($scope,$element,$attrs,$transclude){
//控制器逻辑放在这里
})
也可以直接在指令内部的定义为匿名函数，同样也可以注入任何服务（$log,$timeout等等）。
angular.module('myApp',[]).directive('myDirective',function(){
restrict:'A',
controller:function($scope,$element,$attrs,$transclude){
//控制器逻辑放在这里
}
})
另外还有一些特殊的服务（参数）可以注入
（1）$scope,与指令元素相关联的作用域
（2）$element，当前指令对应的元素
（3）$attrs，由当前元素属性组成的对象
（4）$transclude，嵌入链函数，实际被执行来用来克隆元素和操作DOM的函数。
注意，除非是用来定义一些可复用的行为，一般不推荐在这使用。
<!DOCTYPE html>
<html lang="zh" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>AngularJS入门学习</title>
<script type="text/javascript" src="./1.5.3/angular.min.js"></script>
</head>
<body>
<hello mycolor="red">我是林炳文</hello>
</body>
<script type="text/javascript">
var app=angular.module('myApp',[]);
app.directive('hello',functiion(){
return{
restrict:"EA",
translate：true，//注意此处必须设置为 true
controller:function($scope,$element,$attrs,$transclude,$log){
$transclude(function (clone){
var a=angular.element('<p>');
a.css('color',$attrs.mycolor);
a.text(clone.text());
$element.append(a);
});
$log.info("hello everyone")
}
} ;
});
</script>
</html>
输出结果：
image.png
image.png
并且在控制台下输出hello everyone
$transclude()它可以接受两个参数，第一个$scope作用域，第二个是带有参数clone的回调函数，而这个clone实际上就是嵌入的内容（经过jQuery包装）,可以在它上面做很多的DOM操作。
它还有最简单的用法就是
<script>
angular.module('myApp',[]).directive('mySite',function(){
return {
restrict:'EA',
transclude:true,
controller:function($scope,$element,$attrs,$transclude,$log){
var a=$transclude(); //$transclude() 就是嵌入内容
$element.append(a);
}
};
});
</script>
使用$transclude会形成一个新的作用域
默认情况下，如果简单的使用$tancsclude(),那么默认的其作用域就是$transclude生成的作用域。
但是如果使用$transclude($scope,function(clone){}),那么作用域就是directive的作用域了。
如果想使用父作用域可以使用 $scope.$parent.
同理：想要的得到一个新的作用域也可以使用$scope.$parent.new();
10、controllerAs
这个选项的作用是可以设置你自己的控制器的别名。
11、require（字符串或者数组）
字符串代表一个指令的名字，它将会作为link函数的第四个函数。
<!doctype html>
<html ng-app="myApp">
<head>
<script src="http://cdn.staticfile.org/angular.js/1.2.10/angular.min.js"></script>
</head>
<body>
<outer-directive>
<inner-directive></inner-directive>
<inner-directive2></inner-directive2>
</outer-directive>
<script>
var app=angular.module('myApp',[]);
app.directive('outerDirective',function(){
return{
scope：{}，
restrict：‘AE’，
controller:function(){
this.say=function(someDirective){
console.log('Got'+someDirective.message);
};
}
};
});
app.directive('innerDirective',function(){
return{
scope:{},
restrict:'AE',
require:'^outerDirective',
link:function(scope,elem,attrs,controllerInstance){
scope.message="Hi,leifeng";
controllerInstance.say(scope);
}
};
});
app.directive('innerDrective2',function(){
return{
scope:{},
restrict:"AE",
require:"^outDirective",
link:function(scope,attrs,elem,controllerInstance){
scope.message='Hi,shushu';
controllerInstance.say(scope);
}
}
})
</script>
</body>
</html>
上面的例子中的指令innerDirective和指令innerDirective2复用了定义在outDirective的controller中的方法也进一步说明了，指令中的Controller是用来让不同指令间通信的。
网友评论