angularjs directive 指令 学习笔记之基础(一)

CrazyDogWang 2016-06-07

第一章 directive 常用指令

restrict 是一个可选的参数。它告诉AngularJS这个指令在DOM中可以何种形式被声明。默

认AngularJS认为 restrict 的值是 A ,即以属性的形式来进行声明。

取值有:E(元素),A(属性),C(类),M(注释),其中默认值为A;

E(元素):<directiveName></directiveName>

A(属性):<div directiveName='expression'></div>

C(类):   <div class='directiveName'></div>

M(注释):<--directive:directiveName expression-->

priority

优先级参数可以被设置为一个数值。大多数指令会忽略这个参数,使用默认值0,但也有些

场景设置高优先级是非常重要甚至是必须的。例如, ngRepeat 将这个参数设置为1000,这样就可

以保证在同一元素上,它总是在其他指令之前被调用。

如果一个元素上具有两个优先级相同的指令,声明在前面的那个会被优先调用。如果其中一

个的优先级更高,则不管声明的顺序如何都会被优先调用:具有更高优先级的指令总是优先运行。

terminal 是一个布尔型参数,可以被设置为 true 或 false 。

如果元素上某个指令设置了 terminal 参数并具有较高的优先级,就不要再用其他低优先级的

指令对其进行修饰了,因为不会被调用。但是具有相同优先级的指令还是会被继续调用

template (字符串或函数)

templateUrl (字符串或函数)

一个代表外部HTML文件路径的字符串;

一个可以接受两个参数的函数,参数为 tElement 和 tAttrs ,并返回一个外部HTML文件路径的字符串。

例子

template 字符串例子

定义指令js 

angular.module("app",[]).directive("hello",function(){
        return{
            restrict:'EA',
            template:"<div><h3>hello world</h3></div>"
        };
    })

  

HTML代码为:

<hello></hello>

  

结果渲染后的HTML为:

<hello>
   <div><h3>hello world</h3></div>
</hello>

  

template 定义方法返回字符串

定义指令js

angular.module("app",[]).directive("directitle",function(){
        return{
            restrict:'EAC',
            template: function(tElement,tAttrs){
                var _html = '';
                _html += '<div>'+tAttrs.title+'</div>';
                return _html;
            }
        };
    })

注意:标签中的属性值。  

HTML代码:

<directitle title='biaoti'></directitle>

  

渲染之后的HTML:

<div>biaoti</div>

  

使用缓存存储指令内容例子

<script type='text/ng-template' id='woshimuban.html'>
	<div>我是模板内容</div>
</script>

  

angular.module("template.html", []).run(["$templateCache", function($templateCache) {
	$templateCache.put("template.html",
			"<div>wo shi mu ban</div>");
}]);

replace 是一个可选参数,如果设置了这个参数,值必须为 true ,因为默认值为 false 。默

认值意味着模板会被当作子元素插入到调用此指令的元素内部

<!doctype html>
<html ng-app="MyModule">
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<hello>
		</hello>
	</body>
	<script src="framework/angular-1.3.0.14/angular.js"></script>
	<script src="replace.js"></script>
</html>
var myModule = angular.module("MyModule", []);
myModule.directive("hello", function() {
    return {
    	restrict:"AE",
    	template:"<div>Hello everyone!</div>",
    	replace:false
    } 
});

angularjs directive 指令 学习笔记之基础(一)

transclude 是一个可选的参数。如果设置了,其值必须为 true ,它的默认值是 false 。

嵌入允许指令的使用者方便地提供自己的HTML模板,其中可以包含独特的状态和行为,并

对指令的各方面进行自定义。

嵌入通常用来创建可复用的组件,典型的例子是模态对话框或导航栏。

第二章 directive 运行顺序

 

相关推荐

编程爱好者联盟 / 0评论 2016-11-22