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

AngularJs中的directives(指令)

时间:2016-08-20 23:27:30      阅读:904      评论:0      收藏:0      [点我收藏+]

标签:

一、指令的职责

  指令的职责是修改DOM结构,并将作用域和DOM连接起来.即指令既要操作DOM,将作用域内的数据绑定到DOM节点上,又要为DOM绑定事件调用作用域内的对应的方法。

 

二、创建自定义指令

调用自定义指令的4种方式:元素、属性、样式类、注释.

技术分享

常用的是前两种,实例如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body ng-app="myApp" >
		<hello></hello><!--E元素-->
		<div hello></div><!--A属性-->
		<div class="hello"></div><!--C样式类-->
		<!--directive:hello--> 
		
	</body>
	<script type="text/javascript" src="js/angular.js" ></script>
    <script type="text/javascript" src="js/directive.js" ></script>
</html>

 js代码:

var app = angular.module("myApp",[]);
app.directive("hello",function(){
	return {
		restrict: ‘AECM‘,
		template:‘<div>Hi everyone</div>‘,//模板
		//templateUrl:‘index.html‘,
		replace: true
	}
});

 技术分享

测试结果只有3条内容,没有显示采用注释的方法调用指令的结果.不过常用的还是使用属性和元素的方式来调用指令.

 

三、指令定义中用到的其他字段

1.templateUrl

模板的显示还可以使用templateUrl属性来调用html文件中的DOM元素.

 

如果其他指令也要使用同一个模板,可以利用AngularJs中的$templateCache属性将模板缓存起来然后再调用:

用到angular中的run方法,它只会执行一次.

技术分享

js文件:

var app = angular.module("myApp",[]);
//app.directive("hello",function(){
//	return {
//		restrict: ‘AECM‘,
//		template:‘<div>Hi everyone</div>‘,//模板
//		//templateUrl:‘index.html‘,
//		replace: true
//	}
//});

app.run(function($templateCache){
	$templateCache.put("hello.html","<div>Hello,my name is yo</div>");
});

app.directive("hello",function($templateCache){
	return {
		restrict: ‘A‘,
		//template:‘<div>Hi everyone</div>‘,//模板
		template:$templateCache.get("hello.html"),//模板
		//templateUrl:‘index.html‘,
		replace: true
	}
});

app.directive("hi",function($templateCache){
	return {
		restrict: ‘E‘,
		//template:‘<div>Hi everyone</div>‘,//模板
		template:$templateCache.get("hello.html"),//模板
		//templateUrl:‘index.html‘,
		replace: true
	}
});

 测试结果:

技术分享

2.transclude:是否为指令模板或编译函数提供指令元素中的内容.

不加这个字段,在指令中添加模板会替换掉之前有的内容,transclude是很重要的一个字段,它可以让指令与指令之间相互嵌套.

技术分享

js关键代码:

技术分享

效果:

技术分享

 

3. link:定义将指令与作用域连接起来的链接函数

技术分享

js文件:

var app = angular.module("myApp",[]);
app.controller("myController",[‘$scope‘,function($scope){
	$scope.loadData = function() {
		console.log("数据加载中...");
	};
}
]);

app.directive("loader",function($templateCache){
	return {
		restrict: ‘AE‘,
		link: function(scope,element,attr){
			element.bind("mouseenter",function(){
				scope.loadData();
			});
		}
		//template:‘<div>Hi everyone</div>‘,//模板
		//transclude: true,
		//template:"<div>Hi everyone<div ng-transclude></div></div>",
		//templateUrl:‘index.html‘,
			
	}
});

 效果:

技术分享

注:将scope.loadData();替换成scope.$apply("loadData()");可以达到同样的效果.

 

如果有多个controller指令的情况,如何调用方法?

采用用属性的方式来调用属性:

技术分享

 

var app = angular.module("myApp",[]);
app.controller("myController",[‘$scope‘,function($scope){
	$scope.loadData = function() {
		console.log("数据加载中...");
	};
}
]);

app.controller("myController2",[‘$scope‘,function($scope){
	$scope.loadData2 = function() {
		console.log("数据加载中aaaa...");
	};
}
]);


app.directive("loader",function($templateCache){
	return {
		restrict: ‘AE‘,
		link:function(scope,element,attrs){
			element.bind("mouseenter",function(){
				//scope.loadData();
				scope.$apply(attrs.howtoload);
			});
		}
		//template:‘<div>Hi everyone</div>‘,//模板
		//transclude: true,
		//template:"<div>Hi everyone<div ng-transclude></div></div>",
		//templateUrl:‘index.html‘,
			
	}
});

 

AngularJs中的directives(指令)

标签:

原文地址:http://www.cnblogs.com/yy95/p/5791421.html

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