directive <一>全面论述
一、定义指令
在Angular中，定义一个新指令的方法很简单，只需要调用directive方法即可，该方法可以接收两个参数，具体的调用格式如下：
var app = angular.module("myapp", []);
app.directive(name, fn) ;
示例代码如下：
<!doctype html> <html ng-app="MyModule"> <head> <meta charset="utf-8"> <script type="text/javascript" src="angular-1.3.0/angular.min.js"></script> </head> <body> <hello></hello> <div hello></div> <div class="hello"></div> <!-- directive:hello --> <div></div> <script type="text/javascript" > var myModule = angular.module("MyModule", []); myModule.directive("hello", function() { return { restrict: 'AEMC', template: '<div>Hi everyone!</div>', replace: true } }); </script> </body> </html>
二、指令对象的基础属性
replace属性值是布尔类型的，当该属性值为true时，表示将模板中的内容替换为指令为标记；当该属性值为false时，表示不替换指令标记，而是将内容插入到指令标记中，此时，无论指令标记中是否存在内容，都将被清空，该属性的默认值为false。
templateUrl的属性值是一个URL地址，该地址将指向一个模板页面，该属性常用于处理复杂模板内容，与template属性不能同时使用，只能取其中之一。
示例代码如下：
<!doctype html> <html ng-app="MyModule"> <head> <meta charset="utf-8"> <title>指令对象的基础属性</title> <script type="text/javascript" src="angular-1.2.16/angular.min.js"></script> <style type="text/css"> .frame{ padding:2px 8px; margin: 0px; font-size: 12px; width:320px; background-color: #eee; } </style> </head> <body> <div class="frame"> <ts-tplfile></ts-tplfile> <ts-tplscipt></ts-tplscipt> <ts-tplcache></ts-tplcache> </div> <script type="text/ng-template" id="tpl"> <h3>模板内容来自于script元素</h3> </script> <script type="text/javascript"> var app=angular.module('MyModule',[]) .run(function($templateCache){ $templateCache.put('cache', '<h3>模板内容来自缓存</h3>') }) .directive('tsTplfile',function(){ return{ restrict:'EAC', templateUrl:'tpl.html', }; }) .directive('tsTplscipt',function(){ return{ restrict:'EAC', templateUrl:'tpl', replace:true }; }) .directive('tsTplcache',function(){ return{ restrict:'EAC', templateUrl:'cache', }; }); </script> </body> </html>
三、Angular指令对象的重要属性
1.指令对象中的transclude属性
在定义指令对象时，可以不添加transclude属性，如果添加该属性，那么它的属性值是布尔类型的，默认值为false，表示不开启属性，如果设置为true时，则开启了该属性；当开启了属性后，就可以在模板中通过ng-transclude方式替换指令元素中的地内容。
代码示例如下：
<!doctype html> <html ng-app="MyModule"> <head> <meta charset="utf-8"> <script type="text/javascript" src="angular-1.3.0/angular.min.js"></script> </head> <body> <hello> <div>这里是指令内部的内容。</div> </hello> <script type="text/javascript"> var myModule = angular.module("MyModule", []); myModule.directive("hello", function() { return { restrict:"AE", transclude:true, template:"<div>Hello everyone!<div ng-transclude></div></div>" } }); </script> </body> </html>
2.指令对象中的link属性
“link”属性的值是一个函数，在该函数中可以操控DOM元素对象，包括绑定元素的各类事件，定义事件触发时执行的内容，函数定义的代码如下：
link:function(scope,element,attrs){
...
}
其中，scope参数表示指令所在的作用域，它的功能和页面中控制器注入的作用域是相同的，element参数表示指令中的元素，attrs表示指令元素的属性集合。
示例代码如下：
<!doctype html> <html ng-app="MyModule"> <head> <meta charset="utf-8"> <title>指令对象的link属性</title> <script type="text/javascript" src="angular-1.2.16/angular.min.js"></script> <style type="text/css"> .frame{ padding:2px 8px; margin: 0px; font-size: 12px; width:320px; background-color: #eee; } .tip{ font-size: 9px; color:#666; margin:3px 5px; } </style> <script type="text/ng-template" id="tpl"> <button>单击按钮</button> </script> </head> <body> <div class="frame"> <ts-tplscipt></ts-tplscipt> <div class="tip">{{content}}</div> </div> <script type="text/javascript"> var app=angular.module('MyModule',[]) .directive('tsTplscipt',function(){ return{ restrict:'EAC', templateUrl:'tpl', replace:true, link:function(scope,element,attrs){ element.bind('click',function(){ scope.$apply(function(){ scope.content='这是点击后的内容'; }) attrs.$$element[0].disable=true; }); } }; }); </script> </body> </html>
3.指令对象的scope属性
（1）scope属性是布尔值
scope属性自定义指令时，默认值就是布尔类型的，初始值为false。在这种情况下，指令中的作用域就是指令元素所在的作用域，两者是相同的。如果scope属性值为true,则表示子作用域（指令中的作用域成为子作用域，把指令元素所在的作用域称为父作用域）是独立创建的，当它的内容发生变化时，并不会修改父作用域中的内容。示例代码如下：
<!doctype html> <html ng-app="MyModule"> <head> <meta charset="utf-8"> <title>scope属性</title> <script type="text/javascript" src="angular-1.2.16/angular.min.js"></script> <style type="text/css"> .frame{ padding:2px 8px; margin: 0px; font-size: 12px; width:320px; background-color: #eee; } .tip{ font-size: 9px; color:#666; margin: 3px 5px; } </style> <script type="text/ng-template" id="tpl"> <div class="tip">{{message}}</div> <button ng-transclude></button> </script> </head> <body> <div class="frame"> <input ng-model="message" placeholder="请输入内容"/> <ts-message>固定</ts-message> </div> <script type="text/javascript"> var app=angular.module('MyModule',[]) .directive('tsMessage',function(){ return{ restrict:'EAC', templateUrl:'tpl', transclude:true, scope:true, link:function(scope,element,attrs){ element.bind('click',function(){ scope.$apply(function(){ scope.message='这是单击按钮后的值'; }) }) } }; }); </script> </body>
（2）scope属性是对象
scope属性值还可以设置成一个JSON对象，如果是对象，那么，父作用域与自作用域是完全独立的，不存在任何联系。当指令中的scope属性值是JSON对象时，如果子作用域需要添加属性，必须先添加指令中的link函数，然后，通过函数中的scope对象进行添加；如果在子作用域中，要绑定或调用父作用域中的属性和方法，则需要在scope属性对应的的JSON对象值中添加绑定策略。
作者：开心糖果的夏天
链接：http://www.jianshu.com/p/6d30a0fbe74e
