1 <!DOCTYPE html> 2 <html ng-app="app"> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script src="js/angular1.3.14.min.js"></script> 7 </head> 8 <body> 9 <gys-directive></gys-directive> 10 <pp-directive value="www.baidu.com" text="链接一"></pp-directive> 11 <div pp-directive value="www.gugou.com" text="链接二"></div> 12 <script> 13 var appModule=angular.module("app",[]); 14 appModule.directive("gysDirective", function () { 15 return{ 16 replace:true, 17 restrict:"E", 18 template:"<a href='http:ww.baidu.com'>百度</a>" 19 }; 20 }).directive("ppDirective", function () { 21 return{ 22 replace:true, 23 restrict:"EAC", 24 template:function(elem,attr){ 25 return "<a href='"+attr.value+"'>"+attr.text+"</a>"; 26 } 27 }; 28 }); 29 </script> 30 </body> 31 </html>
重点在于上面的return.
下面看看return中的所有的参数.
1 { 2 restrict: String, 3 priority: Number, 4 terminal: Boolean, 5 template: String or Template Function: 6 function(tElement, tAttrs) {...}, 7 templateUrl: String, 8 replace: Boolean or String, 9 scope: Boolean or Object, 10 transclude: Boolean, 11 controller: String or 12 function(scope, element, attrs, transclude, otherInjectables) { ... }, 13 controllerAs: String, 14 require: String, 15 link: function(scope, iElement, iAttrs) { ... }, 16 compile: // 返回一个对象或连接函数，如下所示： 17 function(tElement, tAttrs, transclude) { 18 return { 19 pre: function(scope, iElement, iAttrs, controller) { ... }, 20 post: function(scope, iElement, iAttrs, controller) { ... } 21 } 22 return function postLink(...) { ... } 23 } 24 }
restrict是一个可选的参数。用于指定该指令在DOM中以何种形式被声明。默认值是A，即以属性的形式来进行声明。
E:<gys-directive></gys-directive> 标签
A: <div gys-directive="expression"></div> 属性
C: <div class="gys-directive:expression;"></div> 类名
M:<!--directive:gys-directive expression-->
priority:大多数指令会忽略这个参数，使用默认值0，但也有些场景设置高优先级是非常重要甚至是必须的。例如，ngRepeat将这个参数设置为1000，这样就可以保证在同一元素上，它总是在其他指令之前被调用。
terminal:这个参数用来停止运行当前元素上比本指令优先级低的指令。但同当前指令优先级相同的指令还是会
被执行。例如：ngIf的优先级略高于ngView（它们操控的实际就是terminal参数），如果ngIf的表达式值为
true，ngView就可以被正常执行，但如果ngIf表达式的值为false，由于ngView的优先级较低就不会被执行。
template:参数是可选的，必须被设置为以下两种形式之一：
- 一段HTML文本；
- 一个可以接受两个参数的函数，参数为tElement和tAttrs，并返回一个代表模板的字符串。tElement和tAttrs中的t代表template，是相对于instance的。
上面例子中都有.
templateUrl是可选的参数，可以是以下类型：
一个代表外部HTML文件路径的字符串；
一个可以接受两个参数的函数，参数为tElement和tAttrs，并返回一个外部HTML文件路径的字符串。
replace:是一个可选参数，如果设置了这个参数，值必须为true，因为默认值为false。默认值意味着模板会被当作子元素插入到调用此指令的元素内部,
transclude:除了替换和插入内容之外,还可以通过transclude属性将内容插入新的模板.当此属性设置为true的时候,指令中的字内容会被插入到,
ng-transclude的标签中.
上例中的结果是:
如果改成false.那么子内容将会被替换掉.
运行的结果:
一个示例点明了complie和link用法.(转载自:http://damoqiongqiu.iteye.com/blog/1917971)
css代码:
1 .expander { 2 border: 1px solid black; 3 width: 250px; 4 } 5 6 .expander>.title { 7 background-color: black; 8 color: white; 9 padding: .1em .3em; 10 cursor: pointer; 11 } 12 13 .expander>.body { 14 padding: .1em .3em; 15 } 16
Html代码:
1 <div ng-controller="SomeController"> 2 <expander class="expander" myname="思思博士" expander-title='title'> 3 {{text}} 4 </expander> 5 </div>
1 var appModule=angular.module('app',[]); 2 appModule.directive('expander',function(){ 3 return{ 4 restrict:"EA", 5 replace:true, 6 transclude:true, 7 //下面这个scope到底是干嘛的 我是真看不出来了,希望知道的大神们给个解答啊. 8 scope:{ 9 title:"=expanderTitle" 10 }, 11 template:function(){ 12 var html='<div>'; 13 html+='<div class="title" ng-click="toggle()">{{title}}</div>'; 14 html+='<div class="body" ng-show="showMe" ng-transclude></div></div>'; 15 return html; 16 }, 17 link:function(scope,element,attrs){ 18 alert(attrs.myname); 19 scope.showMe=false; 20 scope.toggle=function(){ 21 scope.showMe=!scope.showMe; 22 } 23 } 24 } 25 }); 26 27 appModule.controller("SomeController",function($scope){ 28 $scope.title="点击展开"; 29 $scope.text="这是内部的内容."; 30 });
查看界面:
controller:参数可以是一个字符串或一个函数。当设置为字符串时，会以字符串的值为名字，来查找注册在应用中的控制器的构造函数
1 angular.module('myApp', []) 2 .directive('myDirective', function() { 3 restrict: 'A', 4 controller: 'SomeController' 5 })
可以在指令内部通过匿名构造函数的方式来定义一个内联的控制器
1 angular.module('myApp',[]) 2 .directive('myDirective', function() { 3 restrict: 'A', 4 controller: 5 function($scope, $element, $attrs, $transclude) { 6 // 控制器逻辑放在这里 7 } 8 });
我们可以将任意可以被注入的ng服务注入到控制器中，便可以在指令中使用它了。控制器中也有一些特殊的服务可以被注入到指令当中。这些服务有：
1. $scope
与指令元素相关联的当前作用域。
2. $element
当前指令对应的元素。
3. $attrs
由当前元素的属性组成的对象。
1 <div id="aDiv"class="box"></div> 2 具有如下的属性对象： 3 { 4 id: "aDiv", 5 class: "box" 6 }
4. $transclude
嵌入链接函数会与对应的嵌入作用域进行预绑定。transclude链接函数是实际被执行用来克隆元素和操作DOM的函数。
1 angular.module('myApp',[]) 2 .directive('myLink', function () { 3 return { 4 restrict: 'EA', 5 transclude: true, 6 controller: 7 function ($scope, $element,$attrs,$transclude) { 8 $transclude(function (clone) { 9 var a = angular.element('<a>'); 10 a.attr('href', $attrs.value); 11 a.text(clone.text()); 12 $element.append(a); 13 }); 14 } 15 }; 16 });
<my-link value="http://www.baidu.com">百度</my-link>
<div my-link value="http://www.google.com">谷歌</div>
controllerAs参数用来设置控制器的别名，这样就可以在视图中引用控制器甚至无需注入$scope。
<div ng-controller="MainController as main"> <input type="text" ng-model="main.name" /> <span>{{ main.name }}</span> </div>
javascript:
angular.module('myApp',[])
.controller('MainController', function () {
this.name = "Halower";
});
控制器的别名使路由和指令具有创建匿名控制器的强大能力。这种能力可以将动态的对象创建成为控制器，并且这个对象是隔离的、易于测试。
require为字符串代表另外一个指令的名字。require会将控制器注入到其所指定的指令中，并作为当前指令的链接函数的第四个参数。字符串或数组元素的值是会在当前指令的作用域中使用的指令名称。在任何情况下，ng编译器在查找子控制器时都会参考当前指令的模板。
- 如果不使用^前缀，指令只会在自身的元素上查找控制器。指令定义只会查找定义在指令作当前用域中的ng-model=""
- 如果使用?前缀,在当前指令中没有找到所需要的控制器，会将null作为传给link函数的第四个参数。
- 如果添加了^前缀，指令会在上游的指令链中查找require参数所指定的控制器。
- 如果添加了?^ 将前面两个选项的行为组合起来，我们可选择地加载需要的指令并在父指令链中进行查找
- 如果没有任何前缀，指令将会在自身所提供的控制器中进行查找，如果没有找到任何控制器（或具有指定名字的指令）就抛出一个错误
一个综合示例.和上面的示例同样来自一个地方.
js代码:
1 var expModule=angular.module('expanderModule',[]) 2 expModule.directive('accordion', function() { 3 return { 4 restrict : 'EA', 5 replace : true, 6 transclude : true, 7 template : '<div ng-transclude></div>', 8 controller : function() { 9 var expanders = []; 10 this.gotOpened = function(selectedExpander) { 11 angular.forEach(expanders, function(expander) { 12 if (selectedExpander != expander) { 13 expander.showMe = false; 14 } 15 }); 16 } 17 this.addExpander = function(expander) { 18 expanders.push(expander); 19 } 20 } 21 } 22 }); 23 24 expModule.directive('expander', function() { 25 return { 26 restrict : 'EA', 27 replace : true, 28 transclude : true, 29 require : '^?accordion', 30 scope : { 31 title : '=expanderTitle' 32 }, 33 template : '<div>' 34 + '<div class="title" ng-click="toggle()">{{title}}</div>' 35 + '<div class="body" ng-show="showMe" ng-transclude></div>' 36 + '</div>', 37 link : function(scope, element, attrs, accordionController) { 38 scope.showMe = false; 39 accordionController.addExpander(scope); 40 scope.toggle = function toggle() { 41 scope.showMe = !scope.showMe; 42 accordionController.gotOpened(scope); 43 } 44 } 45 } 46 }); 47 48 expModule.controller("SomeController",function($scope) { 49 $scope.expanders = [{ 50 title : 'Click me to expand', 51 text : 'Hi there folks, I am the content that was hidden but is now shown.' 52 }, { 53 title : 'Click this', 54 text : 'I am even better text than you have seen previously' 55 }, { 56 title : 'Test', 57 text : 'test' 58 }]; 59 });
HTML代码:
1 <html ng-app="expanderModule"> 2 <head> 3 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 4 <script src="../angular-1.0.3/angular.min.js"></script> 5 <link rel="stylesheet" type="text/css" href="Accordion.css"/> 6 </head> 7 <body ng-controller='SomeController' > 8 <accordion> 9 <expander class='expander' ng-repeat='expander in expanders' expander-title='expander.title'> 10 {{expander.text}} 11 </expander> 12 </accordion> 13 </body> 14 <script src="Accordion.js"></script> 15 </html>
css代码:
1 .expander { 2 border: 1px solid black; 3 width: 250px; 4 } 5 6 .expander>.title { 7 background-color: black; 8 color: white; 9 padding: .1em .3em; 10 cursor: pointer; 11 } 12 13 .expander>.body { 14 padding: .1em .3em; 15 }
