angularJS中的子指令


后端

零度逍遥

2015-08-25 02:21:06

前面有篇文章我已经简单的介绍了angular的指令,希望看到此篇的朋友先阅读那篇文章《angularJS的指令简单示例》。

angular里其实可以指令套指令,也就是说在我们创建的指令里面继续添加我们想要的指令,以满足我们复杂的需求,首先上代码:


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
	<script src="http://cdn.bootcss.com/angular.js/1.4.4/angular.js"></script>
	<script>
	angular.module('demo',[])
	.directive('box',function(){
		return{
			controller:function(){
				this.setBigWidth = function(ele){
					ele[0].style.width = '100px';
				}
				this.setBigHeight = function(ele){
					ele[0].style.height = '100px';
				}
				this.setBg = function(ele){
					ele[0].style.background = 'red';
				}
			}
		}
	})

	.directive('bigwidth',function(){
		return{
			require:'box',
			link:function(scope,ele,attr,boxCtrl){
				ele.bind('mouseenter',function(){
					boxCtrl.setBigWidth(ele);
				})
				
			}
		}
	})

	.directive('bigheight',function(){
		return{
			require:'box',
			link:function(scope,ele,attr,boxCtrl){
				ele.bind('mouseenter',function(){
					boxCtrl.setBigHeight(ele);
				})
			}
		}
	})

	.directive('red',function(){
		return{
			require:'box',
			link:function(scope,ele,attr,boxCtrl){
				ele.bind('mouseenter',function(){
					boxCtrl.setBg(ele);
				})
			}
		}
	})

	</script>
	<style>
		div{margin: 50px;width: 50px;height: 50px;border: 1px solid #ccc;}
	</style>
</head>
<body ng-app='demo'>
		<div box bigWidth></div>
		<div box bigWidth bigHeight></div>
		<div box bigWidth bigHeight red></div>
</body>
</html>
效果图如下:


初始效果是这样:

鼠标依次放入三个div后的效果是这样:

分析代码,我们把指令box看做是父指令,在它里面有一个controller方法体,controller方法体里面的方法是开放的,可以供引用它的指令调用,我们在里面分别写了三种操作DOM的函数。在下面三个子指令里面,我们首先引用父指令,使用require,然后使用link方法给元素绑定事件,在事件里面我们可以使用父指令里面定义好的函数,注意,link方法的第四个参数就是指向父指令的controller方法体。

最后一点需要注意的是,这应该是angular的一个小坑,在我们命名指令的时候,即使我们html里面使用了驼峰命名法,在这里也一律使用小写,如上面的指令bigWidth,在html中使用的驼峰,在js中使用的是小写。