码迷,mamicode.com
首页 > Web开发 > 详细

AngularJs编写指令

时间:2015-07-24 22:29:38      阅读:188      评论:0      收藏:0      [点我收藏+]

标签:

 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。默认值意味着模板会被当作子元素插入到调用此指令的元素内部,

 

AngularJs编写指令

标签:

原文地址:http://www.cnblogs.com/guoyansi19900907/p/4674635.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!