angularjs自定义指令属性详解

末蓝、 2022-06-09 10:36 211阅读 0赞

# angularjs自定义指令属性详解 #

通常在使用angularjs过程中，很多时候angular自带指令不能满足我们对于各种业务的需求。这个时候我们需要自定义指令，自定义指令属性详解如下：

var directiveModule = angular.module("DirectiveModule",[]);
    		//第一个为指令名称，采用驼峰命名，在使用时相应的驼峰位置换为-如<ddd-directive></ddd-directive>也可以<ddd:directive></ddd:directive>
    		directiveModule.directive("dddDirective",function(){
    			return {
    				//指定angularjs自定义指令使用的形式，有4中E元素<direc></direc>、A属性<div direc></div>、C样式<div class="direc"></div>、M注释
    				//可以指定其中的一个或则者几个使用方式
    				restrict:'AECM',
    				//是否用指令的template属性定义的HTML模板内容替换指令所在的HTML元素
    				replace:true,
    				//template属性指定angularjs指令被替换成的HTML模板，template指定的模板html元素中还可以使用指令
    				//template:'<div>....<span>{
       {...}}<span></div>'
    				//templateUrl属性指定一个HTML文件作为指令模板，效果和template属性一致。
    				templateUrl:'template.html',
    				
    				//link方法
    				link:function(scope,elem,attrs,control){
    					//参数解释
    					//scope参数：表示指令的作用域，默认情况下是同父作用域相同的
    					//elem参数：表示当前指令的HTML元素。
    					//attrs参数：表示一个对象，包含指令的所有属性以及属性值
    					//control参数：表示一个controller对象，通常用访问其他指令controller里面的属性和方法。
    					
    					//在link方法中，可以响应HTML元素的事件和监听作用域模型数据变化
    					
    				}
    				
    				//compile方法
    				//angularjs处理指令的流程：浏览器开始渲染HTML页面时，首先加载HTML元素、创建文档对象模型（DOM），加载完成后会触发onload事件
    				//如果使用了angularjs，Angularjs会监听onload事件，然后从DOM元素中查找ng-app指令，如果找到就启动Angularjs框架，接着从
    				//ng-app指令所在的HTML标签开始使用$compile服务遍历DOM元素。我们使用的directive()方法注册的指令都会保存在一个容器中，angularjs
    				//从这些元素中识别指令元素，一旦指令被识别，就会执行指令定义的compile()方法。所有指令的compile()方法只会在angular启动的时候执行一次。
    				
    				//compile的主要作用是用在link()方法执行之前对DOM元素进行修改。
    				compile:function(tElem,tAttrs){
    					//tElem:指令所在的元素。
    					//tAttrs:指令元素的所有属性列表。
    				}
    				
    				
    				//scope指令作用域
    				//默认来说，如果不为指令指定单独的作用域，那么指令将会使用父作用域
    				//但是有两种方式拜托父作用域：1.使用子子作用域从父作用域原型继承。2.使用孤立作用域，创建一个新的作用域，与副作用与没有任何关系。
    				//如果指定scope属性值位true，那么指令将新创建一个作用域对象，该作用域对象会从父作用域原型继承，如果希望指令作用域中拥有父作用域的所有模型数据可以采用这种方式。
    				//scope:true,
    				
    				//定义单独的作用域scope:{}，与父作用域完全分离。
    				scope:{
    					//在定义孤立的作用域里面也可以和父作用域进行模型数据绑定。
    					//例如在父作用域中一个属性值，可以绑定到指令的作用域中
    					
    					//使用@符号建立给予属性的绑定
    					name:"@", //前面的name为父作用域中的属性，绑定到子作用域中的name属性中，也可以单独的为子作用域中绑定属性命名使用name:'@childName'，这里就会使得父作用域的name属性值会绑定到子作用域的childName属性中
    					
    					//使用=符号进行双向数据绑定
    					Id:'=',//这里也可以定义子作用域中的名称只需Id:'=childId'，=是双向数据绑定。
    					
    					//使用&符号进行与父作用域函数的绑定，调用父作用域的方法。
    					countFn:'&'//这里也可以定义子作用域中的名称只需countFn:'&childCountFn'，=是双向数据绑定。
    				},
    				
    				
    				//transclude（嵌入）
    				//transclude属性有三个值第一false（默认），第二true，第三element
    				
    				
    				//controller方法和require属性
    				//指令对象的controller方法为指令控制器的构造方法，主要用于和其它指令进行通信，我们可以在指令构造方法中定义一些属性或方法供其它指令调用
    				controller:function(){
    					this.tabs = [];//指令的controller的属性，指定require属性，可以被其他指令访问到
    					
    					this.addTab = function(tab){//controller的方法，指定require属性，可以被其他指令访问到
    						this.tabs.push(tab);
    					}
    				},
    				
    				//require属性指定要访问的指令名称，如果该指令与被访问指令作用域有父子关系require属性值为：
    				require:'^父指令名',//告述angularjs从当前元素及父元素查找controller对象，查找到require指定的指令后，那么被查找到的指令的控制器将会作为link方法的第四个参数传进来，所以可以通过ctrl调用其它指令里面的api。
    				
    				//需要注意的事link()函数的第四个参数为一个controller对象，就是要访问的controller,所以可以在link()方法中调用其他指令的controller里面的方法
    			}
    		});

发表评论取消回复

表情：

评论列表（有 0 条评论，211人围观）

还没有评论，来说两句吧...

相关阅读

相关 AngularJS自定义指令详解（有分页插件代码）

前言除了 AngularJS 内置的指令外，我们还可以创建自定义指令。通过 .directive() 函数来添加自定义的指令。调用自定义指令时，需要在HTM

柔光的暖阳◎/ 2022年08月21日 15:37/ 0 赞/ 133 阅读

相关 AngularJs常见内置指令自定义指令

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

一时失言乱红尘/ 2022年07月12日 07:09/ 0 赞/ 183 阅读

相关 AngularJS 自定义指令详解标签：自定义指令的参数linktemplateUrlscopeAngularJS 自定义指令详解 2016-08-20 15:02 3831人阅读评论(1)

[AngularJS 自定义指令详解][AngularJS] 标签： [自定义指令的参数][Link 1][link][][templateUrl][][scope

红太狼/ 2022年06月12日 06:45/ 0 赞/ 137 阅读

相关 angularjs自定义指令属性详解

angularjs自定义指令属性详解通常在使用angularjs过程中，很多时候angular自带指令不能满足我们对于各种业务的需求。这个时候我们需要自定义指令，自定义

末蓝、/ 2022年06月09日 10:36/ 0 赞/ 212 阅读

相关 AngularJs自定义指令

1、AngularJS指令在HTML代码中可以有四种表现形式： 1、作为一个新的HTML元素来使用。 <hello></hello>或者<hello/

小咪咪/ 2022年06月08日 00:44/ 0 赞/ 223 阅读

相关 angularJs自定义指令

1. 定义对于指令，可以把它简单的理解成在特定DOM元素上运行的函数，指令可以扩展这个元素的功能。 2.定义指令的方法：第一个参数，指令的名字myDirec

心已赠人/ 2022年05月27日 02:13/ 0 赞/ 167 阅读

相关 angularJS自定义指令各配置项详解

指令详解一个指令的定义应当是如下这个样子： code： angular.module('myApp', []) .directive(

小鱼儿/ 2022年05月25日 00:44/ 0 赞/ 215 阅读

相关 AngularJS - 创建自定义的指令（directive）

除了 AngularJS 内置的指令外，我们还可以创建自定义指令。你可以使用 .directive 函数来添加自定义的指令。要调用自定义指令，HTML 元素上需要添加自定义指令

た入场券/ 2022年05月16日 01:49/ 0 赞/ 229 阅读

相关 AngularJs 自定义指令

自定义指令类似创造一个组件(标签),使得多个页面引用相同内容自定义创建 app页面数据模型.directive()来创建的;

曾经终败给现在/ 2021年07月25日 01:33/ 0 赞/ 407 阅读

相关 AngularJs 自定义指令link操作dom

1.指令方案link 描述：指令方案link是angularJS中提供给自定义指令的一种“专有行为” 操作自定义指令所在范围,包括

ゞ浴缸里的玫瑰/ 2021年07月24日 15:36/ 0 赞/ 386 阅读