一、自定义指令：

zhiling.html

<span style="font-size:18px;"><!doctype html>
<html ng-app="myApp">
<head>
	<script src="js/angular-1.3.0.js"></script>
	<script src="zhiling.js"></script>
</head>
<my-directive></my-directive></span>

zhiling.js

<span style="font-size:18px;">angular.module('myApp',[])
	.directive('myDirective',function() {
		return {
			restrict: 'E',template: '<a href="http://google.com">Click me to go to Google</a>'
		};
});</span>

效果图：

html:

<span style="font-size:18px;"><!doctype html>
<html ng-app="myApp">
<head>
	<script src="js/angular-1.3.0.js"></script>
	<script src="zhiling.js"></script>
</head>
<div my-directive
my-url="http://baidu.com"
my-link-text="Click me to go to baidu"></div>
</html></span>

js:

<span style="font-size:18px;">angular.module('myApp',function() {
		return {
			restrict: 'A',replace: true,scope: {
				myUrl: '@',//绑定策略
				myLinkText: '@' //绑定策略
		},template: '<a href="{{myUrl}}">' +
			'{{myLinkText}}</a>'
	};
});</span>

我们在作用域对象内部把 someProperty 值设置为 @ 这个绑定策略。这个绑定策略告诉AngularJS将DOM中 some-property 属性的值复制给新作用域对象中的 someProperty 属性,默认情况下约定DOM属性和JavaScript中对象属性的名字是一样的（除非对象的属性名采用的是驼峰式写法）。

指令详解

<span style="font-size:18px;">angular.module('myApp',[])
.directive('myDirective',function() {
	return {
		restrict: String,priority: Number,terminal: Boolean,template: String or Template Function:
			function(tElement,tAttrs) (...},templateUrl: String,replace: Boolean or String,scope: Boolean or Object,transclude: Boolean,controller: String or
		        function(scope,element,attrs,transclude,otherInjectables) { ... },controllerAs: String,require: String,link: function(scope,iElement,iAttrs) { ... },compile: // 返回一个对象或连接函数，如下所示：
			function(tElement,tAttrs,transclude) {
				return {
					pre: function(scope,iAttrs,controller) { ... },post: function(scope,controller) { ... }
				}
				// 或者
				return function postLink(...) { ... }
			}
	};
});</span>

directive() 方法可以接受两个参数：

1. name （字符串）

指令的名字，用来在视图中引用特定的指令。

2. factory_function （函数）

这个函数返回一个对象，其中定义了指令的全部行为。 $compile 服务利用这个方法返回的对象，在DOM调用指令时来构造指令的行为。

restrict(字符串)

可选值如下：

E（元素）

<my-directive></my-directive>

A（属性，默认值）

C（类名）

M（注释）

<--directive:my-directive expression-->

这些选项可以单独使用，也可以混合在一起使用：

angular.module('myDirective',function(){

return {

restrict: 'EA' // 输入元素或属性

};

});

无论有多少种方式可以声明指令，我们坚持使用属性方式，因为它有比较好的跨浏览器兼容性：

template(字符串函数）

template 参数是可选的，必须被设置为以下两种形式之一：

1、一段HTML文本；

2、一个可以接受两个参数的函数，参数为 tElement 和 tAttrs ，并返回一个代表模板的字符串。 tElement 和 tAttrs 中的 t 代表 template ，是相对于 instance 的。

priority优先级

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

terminal （布尔型）

这个参数用来告诉AngularJS停止运行当前元素上比本指令优先级低的指令。但同当前指令优先级相同的指令还是会被执行。

templateUrl （字符串或函数）

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

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

replace （布尔型）

replace 是一个可选参数，如果设置了这个参数，值必须为 true ，因为默认值为 false 。默认值意味着模板会被当作子元素插入到调用此指令的元素内部。

scope 参数（布尔型或对象）

scope 参数是可选的，可以被设置为 true 或一个对象。默认值是 false 。

当 scope 设置为 true 时，会从父作用域继承并创建一个新的作用域对象。

controllerAs （字符串）

controllerAs 参数用来设置控制器的别名，可以以此为名来发布控制器，并且作用域可以访问 controllerAs 。这样就可以在视图中引用控制器，甚至无需注入 $scope

其它的项目中用到再查吧。

AngularJS（五）——指令

一、自定义指令：

指令详解

二、内置指令

布尔属性

类布尔属性

向指令中使用子作用域

三、总结

猜你在找的Angularjs相关文章