标签：
1.自定义指令
在angular中，module下面的directive方法用于创建自定义指令，用法：
m1.directive(‘myTab‘,function(){
return {
restrict : ‘AE‘,
replace : true,
templateUrl : ‘‘,
};
});
大致用法如上，在directive的第二个参数里面return出一个对象，对象里面有各种属性。
restrict----指定创建的指令是什么类型，A--attr属性指令，E--element标签指令，C---class指令，M---注释指令.常用的就是A和E。
replace---是否用模板来替换元素
templateUrl---指定模板字符串
还有一些：
controller---指令控制器。这里面可以定义一些指定公用的数据和方法。如：
controller : [‘$scope‘,function($scope){
$scope.name = ‘meng‘;
$scope.show = function(n){
alert(n+1);
}
}],
scope---作用域，共有三个值
默认值false。
表示继承父作用域;
true
表示继承父作用域，并创建自己的作用域（子作用域）;
{}
表示创建一个全新的隔离作用域；
隔离作用域中有三种绑定策略--@，=，&
@ --- 使用@（@attr）来进行单向文本（字符串）绑定
= --- 使用=（=attr）进行双向绑定变量
& --- 使用&来调用父作用域中的函数
link：一个函数，用于操作dom，添加事件，指令间相互调用
该函数一共有4个参数，scope，element，attr,reController
scope --- 该指令的作用域
element--- 该指令解析后的顶层元素
attr-- 属性
指令之间交互 通过transclude和require
设置transclude：true之后，就可以通过ng-transclude来嵌套指令
require---字符串代表另一个指令的名字，它将会作为link函数的第四个参数
没有前缀，指令会在自身提供的控制器中进行查找，如果找不到任何控制器，则会抛出一个error
？如果在当前的指令没有找到所需的控制器，则会将null传给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($scope) { 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(‘innerDirective2‘, function() { return { scope: {}, restrict: ‘AE‘, require: ‘^outerDirective‘, link: function(scope, elem, attrs, controllerInstance) { scope.message = "Hi,shushu"; controllerInstance.say(scope); } }; }); </script> </body> </html>
m1.directive(‘myTab‘,function(){ return { restrict : ‘E‘, replace : true, scope : { myId : ‘@‘, myData : ‘=‘ }, controller : [‘$scope‘,function($scope){ $scope.name = ‘meng‘; }], templateUrl : ‘temp3.html‘, link : function(scope,element,attr){ //console.log(scope.name); //console.log(element); //console.log(attr.myId); } });
标签：
原文地址：http://www.cnblogs.com/toodeep/p/4983264.html
