angular directive自定义指令
先来看一下自定义指令的写法
app.directive('', ['', function(){ // Runs during compile return { // name: '', // priority: 1, // terminal: true, // scope: {}, // {} = isolate, true = child, false/undefined = no change // controller: function($scope, $element, $attrs, $transclude) {}, // require: 'ngModel', // Array = multiple requires, ? = optional, ^ = check parent elements // restrict: 'A', // E = Element, A = Attribute, C = Class, M = Comment // template: '', // templateUrl: '', // replace: true, // transclude: true, // compile: function(tElement, tAttrs, function transclude(function(scope, cloneLinkingFn){ return function linking(scope, elm, attrs){}})), link: function($scope, iElm, iAttrs, controller) { } }; }]);
restrict : A E C M A代表attribute属性，E代表element元素，C代表class类，M代表注释（C和M基本不用）
priority：指令的优先级 ng-repeat的优先级为1000最大，默认的优先级为1
terminal: 是否禁止 低于当前优先级的指令
template:html字符串/返回html的函数
templateUrl:' ',这个不解释了，一时想不起来怎么解释了
replace : true/false true会替换掉标签<hello>内所有的内容 浏览器 ，除了transclude的内容 / false不会替换，遇见不识别的标签只是忽略了
transclude : true/false true保留原始的html放置在有ng-transclude指令的标签里 transclude 和replace结合使用可以保留自定义标签里想要的内容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>replaceDemo</title> <script src="../Scripts/angular-1.5.8/angular.min.js"></script> <script> //replace为 //1 true会替换掉标签<hello>内所有的内容 浏览器 ，除了transclude的内容， //2 false不会替换，遇见不识别的标签只是忽略了 //transclude 和replace结合使用可以保留自定义标签里想要的内容 angular.module('myApp',[]) .directive("hello",function(){ return { restrict:'E', template:'<div>Hi here <sapn ng-transclude></sapn></div>', replace:true, transclude:true } }) </script> </head> <body ng-app="myApp"> <hello> <br> <span>原始的内容，</span><br/> <span>还会在这里。</span> </hello> </body> </html>
scope: false,true,对象{}
false: 当前定义的指令使用父作用域（父作用域和子作用域一样共享）
true：当前指令继承父作用域（子作用域有父作用域的所有数据，但父作用域就不一定有子作用域的一些隐私的数据了，就像儿子从父亲那里继承一样，父亲能从儿子那能得到多少就呵呵了）
对象{}: 指定一些数据从父作用域中继承过来
对象的详细用法：
形如scope:{ string:'@string',//@单向绑定 data:'=data',//=双向绑定 function:'&function'//&继承父作用域的函数 }
提示 @ = 后面跟的都是属性 使用restrict: 'E' 作为元素<say-hello> <say-hello speak="{{content}}">美女</say-hello> con:'@speak' <say-hello speak="content">美女</say-hello> con:'=speak' 使用restrict:'A' 作为属性<div say-hello> <div say-hello speak="{{content}}">美女</div> con:'@speak'
<div say-hello speak="content">美女</div> con:'=speak'
<div say-hello="{{content}}">美女</div> con:'@sayHello' <div say-hello="content">美女</div> con:'=sayHello'
&的使用（写代码的时候总是出错有时不是代码错了，有可能是是没有深度刷新ctrl+F5）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="../Scripts/angular-1.5.8/angular.min.js"></script> </head> <body> <div ng-app="testApp" ng-controller="testC"> <say-hello on-send="onSend()">heng</say-hello> <div say-hello on-send="onSend()">hehe</div> </div> <script> angular.module("testApp",[]).controller('testC',function($scope){ $scope.onSend=function(){ console.log('hehe') }; }).directive("sayHello",function(){ return { restrict:'EA', scope:{ send:'&onSend' }, transclude:true, template:'<div><button ng-click="send()">directive</button><span ng-transclude></span></div>', controller:function($scope){ $scope.send(); } } }) </script> </body> </html>
完整代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="../Scripts/angular-1.5.8/angular.min.js"></script> </head> <body> <div ng-app="testApp" ng-controller="testC"> {{content}} <say-hello speak="content">美女</say-hello> </div> <script> angular.module("testApp",[]).controller('testC',function($scope){ $scope.content="早上好"; }).directive("sayHello",function(){ return { restrict:'E', transclude:true, template:'<div>Hi ! <b ng-transclude></b>{{con}}{{content}}</div>', scope:{ con:'=speak', }, controller:function($scope){ //$scope.con="hehe"; //$scope.content="haha" } } }) </script> </body> </html>
controller：自定义指令的控制器
require : 'ngModel'或者 形如'^?accordion' ngModel是ng-model的控制器详情，accordion是继承其他的控制器， ^代表在父级作用域查找，？代表未查找到不抛出异常，默认在自身作用域查找
link:function(scope,element,attribute,controller){}
scope:当前作用域，element:当前指令的DOM节点,attribute：当前指令的属性，controller当前指令的控制器
有人会问两个controller？
关于directive里的link和controller区别？
1、执行顺序：先controller后link
2、何时使用controller：一般场景下都不想要使用controller，只需要把逻辑写在link中就可以了；用controller的场景就是该指令（假设为a）会被其他指令（假设为b）require的时候，这样就会在b指令的link函数中传入这个controller（如果require多个的话，传入的是一个数组，数组中存放的是每一个require的指令对应的controller），目的很显然是为了指令间进行交流的。
compile这里就不介绍了只要就到这里，好像用了link就不需要compile...
下面是两个实例的代码，折叠和手风琴
参考：http://www.360doc.com/content/15/0602/16/203871_475147642.shtml
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>折叠</title> <script src="../Scripts/angular-1.5.8/angular.min.js"></script> <script> var app=angular.module("myApp",[]); app.controller("testCtrl",function($scope){ $scope.title="个人简介"; $scope.text="我是一个程序员"; }) app.directive("expander",function(){ return { restrict:'E', template:'<div><h3 ng-click="toggle()">{{title}}</h3><div ng-transclude ng-show="showText"></div></div>', transclude:true, replace:true, scope:{ title:'=etitle' }, link:function(scope,elem,attr,controller){ scope.showText=false; scope.toggle=function(){ scope.showText=!scope.showText; } } } }) </script> </head> <body ng-app="myApp"> <div ng-controller="testCtrl"> <expander etitle="title">{{text}}</expander> <expander etitle="title">{{text}}</expander> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>手风琴</title> <script src="../Scripts/angular-1.5.8/angular.min.js"></script> <script> var app=angular.module("myApp",[]); app.controller("testCtrl",function($scope){ $scope.expanders=[{title:'个人简介',text:'我是一个程序员'},{title:'个人简介1',text:'我是一个程序员'},{title:'个人简介2',text:'我是一个程序员'}] }) app.directive("accordion",function(){ return { restrict:'E', template:'<div ng-transclude></div>', transclude:true, replace:true, controller:function(){ var expanders=[]; this.getSelected=function(selected){ angular.forEach(expanders,function(e){ if(selected!=e){ e.showText=false; } }) } this.add=function(e){ expanders.push(e); } } } }) app.directive("expander",function(){ return { restrict:'E', template:'<div><h3 ng-click="toggle()">{{title}}</h3><div ng-transclude ng-show="showText"></div></div>', transclude:true, replace:true, scope:{ title:'=etitle' }, require:'^?accordion',//'accordin'是在自身作用域查找，^ 在父作用域查找 ，？没有查找到不会抛出异常 link:function(scope,elem,attr,controller){ console.log(scope); scope.showText=false; controller.add(scope) scope.toggle=function(){ scope.showText=!scope.showText; controller.getSelected(scope); } } } }) /*1、执行顺序：先controller后link 2、何时使用controller：一般场景下都不想要使用controller，只需要把逻辑写在link中就可以了；用controller的场景就是该指令（假设为a）会被其他指令（假设为b）require的时候，这样就会在b指令的link函数中传入这个controller（如果require多个的话，传入的是一个数组，数组中存放的是每一个require的指令对应的controller），目的很显然是为了指令间进行交流的。*/ </script> </head> <body ng-app="myApp"> <div ng-controller="testCtrl"> <accordion> <expander ng-repeat="expander in expanders" etitle="expander.title">{{expander.text}}</expander> </accordion> </div> </body> </html>
--内容只是作为笔记，有些东西纯属仿照--
参考文档：http://www.cnblogs.com/webHero/p/5770703.html
