Angular.js（五）

最新推荐文章于 2025-08-12 06:06:58 发布

原创最新推荐文章于 2025-08-12 06:06:58 发布 · 385 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angular.js #框架 #模块化

Angular.Js 专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了Angular中自定义指令的使用方法，包括restrict、replace等属性的作用及使用场景，探讨了不同类型的自定义指令如何影响DOM结构，并通过具体案例展示了如何实现复用和嵌套指令。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自定义指令：

directive （1）restrict 创建的A E C M 区分大小写，都要大写（2）replace true和false （3）template 模板（4）templateUrl 模板的链接地址

var m1 = angular.module('myApp',[]);
m1.directive('hello',function(){
	return {
		restrict : 'AECM',  // A 属性  E 标签  C class的用法   M 解析注释，但是要和replace ：true一起使用
		template : '<div>明天你好</div>',
		replace : true
	}
})

<hello></hello>             // E 标签（没有replace：true） 页面显示<hello><div>明天你好</div></hello>
<div hello></div>           // A 属性（没有replace：true） 页面显示<div hello><div>明天你好</div></div>
<div class="hello"></div>   // C class用法（没有replace：true）页面显示<div class="hello"><div>明天你好</div></div>
<!-- directive:hello -->    // M 解析注释 （必须要写replace：true）页面显示<div>明天你好</div>

自定义的指令是可以复用的，不能复用的就不叫指令了

关于directive的具体参数，注意 template的书写位置，不可以调换template或者templateUrl的位置

m1.directive('myHello',function(){
	return {
		restrict : 'E',  // 设置了一个 <my-hello></my-hello> 的标签
		replace : true,  // 新的模板会把 <my-hello></my-hello> 的标签代替
		scope : {   
			// {} 隔离作用域，不会向外部找数据  
			// scope ： true 是独立作用域，不受到其他影响
			myId : '@',     // @ 绑定策略,就是绑定普通的字符串
			myName : '=',   // = 绑定父级下的变量
			myFn : '&'      // & 绑定父级下的函数
		},
		controller : ['$scope',function($scope){
			// 针对自定义属性而设置的，里面的数据共享
			$scope.name = "hello";   
		}],
		template（模板） : '<div class="box" id={{myId}}">\       // 给每个div绑定不同的id
				<input type="button" value="1" class="active">\
				<input type="button" value="2" ng-click="myFn({num:888})">\   // 在父级作用域中找函数，并且传入参数
				<input type="button" value="3">\
				<div class="show">{{myName}}</div>\  // 每个div中的内容是父级作用域中找的
				<div>22222</div>\
				<div>33333</div>\
			</div>'
	}	
});

<my-hello my-id = "box1" my-name="name" my-fn="B(num)"></my-hello>   // 给函数传参
<my-hello my-id = "box2" my-name="name" my-fn="B(num)"></my-hello>

选项卡案例：

css

<style>
	input.active{background: red;}
	.box div{width:400px;height: 200px;border:1px solid #000;display: none;margin-top:20px;}
	.box div.show{display: block;}
</style>

JavaScript（需要引入jQuery文件）

<script>
	var m1 = angular.module('myApp',[]);
	m1.directive('myHello',function(){
		return {
			restrict : 'E',
			replace : true,
			scope : {   
				myId : '@',    
				myData : '=',
			},
			controller : ['$scope',function($scope){
				$scope.name = "hello";   
			}],
			template : '<div class="box" id={{myId}}">\
					<input ng-repeat = "data in myData" type="button" value="{{  data.title}}" ng-class="{active:$first}">\
					<div ng-repeat = "data in myData" ng-class="{show:$first}">{{data.content}}</div>\
				</div>',
			link :function(scope,element,attr){  // link要写在template后面 并且有三个参数
				console.log(scope.name);     // 找到scope下的属性 就是hello
				console.log(element);        // 找到两个div
				console.log(attr.myId);      // 每个div下的属性 attr.myId就代表打印的是每个div的id
				element.delegate('input','click',function(){   // delegate 事件委托
					$(this).attr('class','active').siblings('input').attr('class','');
					$(this).siblings('div').eq($(this).index()).attr('class','show').siblings('div').attr('class','');
				})
			}
		}	
	});
	m1.controller('A',['$scope',function($scope){
		$scope.name = 'hi';
		$scope.dataList1 = [
			{ title:'导航一' , content : '我是导航一'},
			{ title:'导航二' , content : '我是导航二'},
			{ title:'导航三' , content : '我是导航三'}
		];
		$scope.dataList2 = [
			{ title:'二组 导航一' , content : '我是二组导航一'},
			{ title:'二组 导航二' , content : '我是二组导航二'},
		];	
	}])
</script>

html

<body ng-controller="A">
	<my-hello my-id = "box1" my-data="dataList1"></my-hello>
	<my-hello my-id = "box2" my-data="dataList2"></my-hello>
</body>

自定义拖拽指令（主要完成的就是当my-drag= false时，完成普通拖拽，当my-drag = true时，完成带边框的拖拽）

要完成拖拽指令的元素，需要绝对定位

var m1 = angular.module('myApp',[]);
m1.directive('myDrag',function(){
	return {
		restrict : 'A',
		link :function(scope,element,attr){
			var disX = 0;
			var disY = 0;
			// attr.myDrag 本应返回的类型是string，angular.equals将string类型转化为Boolean类型
			attr.myDrag = angular.equals(attr.myDrag,'true');
			element.on('mousedown',function(ev){
				var This = this;
				disX = ev.pageX - $(this).offset().left;
				disY = ev.pageY - $(this).offset().top;

				if(attr.myDrag){
					var $line = $('<div>');
					$line.css({width:$(this).outerWidth(),heigth:$(this).outerHeight,position:'absolute',left:$(this).offset().left-1,top:$(this).offset().top-1,border : '1px dashed #000',background : 'none'});
					$('body').append($line);
				}
				$(document).on('mousemove',function(ev){
					if(attr.myDrag){
						$($line).css({'left':ev.pageX - disX-1, 'top':ev.pageY - disY-1});
					}else{
						$(This).css({'left':ev.pageX - disX, 'top':ev.pageY - disY});
					}	
				});
				$(document).on('mouseup',function(){
					if(attr.myDrag){
						$(This).css({'left':$line.offset().left+1, 'top':$line.offset().top+1});
						$line.remove();
					}
					$(document).off();
				});
				return false;
			})
		}
	}	
});

<div my-drag="false"></div>   // 完成的就是不带边框的拖拽

指令与指令的嵌套

var m1 = angular.module('myApp',[]);
m1.directive('hello',function(){
	return {
		restrict : 'E',
		replace : true,
		transclude : true,    // 默认的情况下是false，变成true以后，指令就可以嵌套指令了，在template中写
		controller : function($scope){
			this.name = "replace";   // 看成对象的方式，在其他指令中也可以找到这个对象下的属性
		},
		template : '<div ng-transclude>hello word<h1></h1></div>'   // ng-transclude 指令嵌套指令，
	    //<div>hello word<h1 ng-transclude></h1></div> 显示的结果就是<div>hello word<h1 ng-transclude><strong>hi word</strong></h1></div>
	    //<div ng-transclude>hello word<h1></h1></div> 显示结果就是<div ng-transclude><strong>hi word</strong></div>
	}
});
m1.directive('hi',function(){
	return {
		restrict : 'E',
		replace : true,
		require : "?^hello",   // ？容错处理，找不到不会报错，返回一个undefined   ^ 寻找得个指令的父级，一般和?连用
		template : '<strong>hi word</strong>',
		link : function(scope,element,attr,reController){
			console.log(reController.name); // reController 所要依赖的controller
		}
	}	
});

<hello>
	<hi></hi>
</hello>       // 最后的页面显示就是 加粗的hi word