AngularJs 自定义指令

曾经终败给现在 2021-07-25 01:33 434阅读 0赞

自定义指令
    	类似创造一个组件(标签),使得多个页面引用相同内容
    
    自定义创建
    app页面数据模型.directive()来创建的;
    
    语法:app页面数据模型.directive('自定义指令名称必须小写',function(){
    		return {
    				restrict:'指令类型',
    				template:'指令结构即html内容',
    				replace:指令复写
    		};
    });
    
    (1)restrct:'指令类型'
    	1、指令类型:指令在页面中通过何种形式进行唤醒，分别为'A'/'E'/'C'/'M';
    	2、"A":指attribute,指令通过属性的方式唤醒
    	3、"E":指element,需要通过元素的方式来唤醒
    	4、"C":指class，需要通过类名方式来唤醒
    	5、"M":指comment,指令需要通过注释的方式来唤醒,该方式replace必须设置成true;
    	6、A'/'E'/'C'/'M';可单独写,也可组合写,功能累加
    
    (2)template:'指令结构'
    	1、指令它通过template加载,则有且仅有一个根节点<!DOCUMENT html>,templateUrl加载则不是
    	2、页面中能够显示的html结构,如果是文件中加载的指令结构,则要写成templateUrl:'路径',和NG中的路由模块化加载类似
    	3、就是写html页面内容
    
    (3)replace:'指令复写'
    	1、指令在页面存在时,是否会被当作成一个子元素添加到当前元素内
    	2、默认为false;表示指令结构中的内容作为子元素添加到父元素内
    	3、true;表示直接替换父元素
    	4、指令类型为"M"注释方式,则必须设置为true,因为注释没有父元素,所以不能通过false来父元素添加子元素实现
    
    (4）自定义指令中嵌套html内容/其他自定义指令
    	(1)在自定义指令中添加transclude属性
    		transclude:true
    	(2)在template模板中,处理嵌套的html内容位置
    		在想要嵌套放置的template的标签中，添加ng-transclude,即会将自定义指令<xx>html内容</xx>,放置到该标签内,否则会直接覆盖原有内容
    	(3)在多个标签中添加ng-transclude,会将html内容重复添加
    
    (5)嵌套多个其他指令,并每个指令放置不同位置

代码示例:

<html ng-app='app' ng-controller='main' >
    <head>
    	<meta charset="utf-8">
    	<meta name='viewport' content='width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0'>
    	<title ng-bind='mainTitle'></title>
    
    	<script src='js/angular.js'></script>
    	<script src='js/angular.route.min.js'></script>	
    	<style>
    
    	</style>
    </head>
    <body >
    
    
    
    
    
    
    
     
    
    //嵌套
    <ssr>	
    	<p>哈哈哈和</p>
    	<p>哈哈哈2</p>
    </ssr>
    
    <script>
    	var app=new angular.module('app',[]);
    
    
    	app.directive('ssr',function(){ 
    
    		return { 
    			restrict:'ACEM',
    			template:'<div><button>指令button</button></div>',
    			replace:true
    
    		};
    	})
    
    	app.controller('main',['$scope',function($scope){ 
    		$scope.mainTitle='自定义指令';
    	}])
    	
    	//自定义指令
    	app.directive('ssr',function(){ 
    		return{ 
    		restrict:'E',
    		transclude:true,
    		//会将自定义指令标签中包含的内容,放置到ng-transclude中
    		template:'<div><div ng-transclude></div><p>哈哈</p><div ng-transclude></div></div>',
    		replace:false
    	}
    	})
    
    </script>
    </body>
    </html>