當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

angular directive自定义指令

發(fā)布時(shí)間：2023/12/18 编程问答 25 豆豆

生活随笔收集整理的這篇文章主要介紹了 angular directive自定义指令小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

先來看一下自定義指令的寫法

app.directive('', ['', function(){// Runs during compilereturn {// name: '',// priority: 1,// terminal: true,// scope: {}, // {} = isolate, true = child, false/undefined = no change// controller: function($scope, $element, $attrs, $transclude) {},// require: 'ngModel', // Array = multiple requires, ? = optional, ^ = check parent elements// restrict: 'A', // E = Element, A = Attribute, C = Class, M = Comment// template: '',// templateUrl: '',// replace: true,// transclude: true,// compile: function(tElement, tAttrs, function transclude(function(scope, cloneLinkingFn){ return function linking(scope, elm, attrs){}})), link: function($scope, iElm, iAttrs, controller) {}};}]);

restrict : A E C M?A代表attribute屬性，E代表element元素，C代表class類，M代表注釋（C和M基本不用）

priority：指令的優(yōu)先級(jí)?ng-repeat的優(yōu)先級(jí)為1000最大，默認(rèn)的優(yōu)先級(jí)為1

terminal: 是否禁止低于當(dāng)前優(yōu)先級(jí)的指令?

template:html字符串/返回html的函數(shù)

templateUrl:' ',這個(gè)不解釋了，一時(shí)想不起來怎么解釋了

replace : true/false　　true會(huì)替換掉標(biāo)簽<hello>內(nèi)所有的內(nèi)容瀏覽器，除了transclude的內(nèi)容 /?false不會(huì)替換，遇見不識(shí)別的標(biāo)簽只是忽略了

transclude : true/false ?true保留原始的html放置在有ng-transclude指令的標(biāo)簽里?transclude 和replace結(jié)合使用可以保留自定義標(biāo)簽里想要的內(nèi)容

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>replaceDemo</title><script src="../Scripts/angular-1.5.8/angular.min.js"></script><script>//replace為//1 true會(huì)替換掉標(biāo)簽<hello>內(nèi)所有的內(nèi)容瀏覽器，除了transclude的內(nèi)容，//2 false不會(huì)替換，遇見不識(shí)別的標(biāo)簽只是忽略了//transclude 和replace結(jié)合使用可以保留自定義標(biāo)簽里想要的內(nèi)容 angular.module('myApp',[]).directive("hello",function(){return {restrict:'E',template:'<div>Hi here <sapn ng-transclude></sapn></div>',replace:true,transclude:true}})</script> </head> <body ng-app="myApp"><hello><br><span>原始的內(nèi)容，</span><br/><span>還會(huì)在這里。</span></hello> </body> </html> View Code

scope: false,true,對(duì)象{}?

false: 當(dāng)前定義的指令使用父作用域（父作用域和子作用域一樣共享） true：當(dāng)前指令繼承父作用域（子作用域有父作用域的所有數(shù)據(jù)，但父作用域就不一定有子作用域的一些隱私的數(shù)據(jù)了，就像兒子從父親那里繼承一樣，父親能從兒子那能得到多少就呵呵了）對(duì)象{}: 指定一些數(shù)據(jù)從父作用域中繼承過來對(duì)象的詳細(xì)用法：
形如scope:{string:'@string',//@單向綁定data:'=data',//=雙向綁定function:'&function'//&繼承父作用域的函數(shù) }
提示 @ = 后面跟的都是屬性使用restrict: 'E' 作為元素<say-hello><say-hello speak="{{content}}">美女</say-hello>con:'@speak'<say-hello speak="content">美女</say-hello>con:'=speak' 使用restrict:'A' 作為屬性<div say-hello><div say-hello speak="{{content}}">美女</div>con:'@speak'
<div say-hello speak="content">美女</div>con:'=speak'
<div say-hello="{{content}}">美女</div>con:'@sayHello'<div say-hello="content">美女</div>con:'=sayHello'

&的使用（寫代碼的時(shí)候總是出錯(cuò)有時(shí)不是代碼錯(cuò)了，有可能是是沒有深度刷新ctrl+F5）

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><script src="../Scripts/angular-1.5.8/angular.min.js"></script></head> <body><div ng-app="testApp" ng-controller="testC"><say-hello on-send="onSend()">heng</say-hello><div say-hello on-send="onSend()">hehe</div></div><script>angular.module("testApp",[]).controller('testC',function($scope){$scope.onSend=function(){console.log('hehe')};}).directive("sayHello",function(){return {restrict:'EA',scope:{send:'&onSend'},transclude:true,template:'<div><button ng-click="send()">directive</button><span ng-transclude></span></div>',controller:function($scope){$scope.send();}}})</script> </body> </html> View Code

完整代碼：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><script src="../Scripts/angular-1.5.8/angular.min.js"></script></head> <body><div ng-app="testApp" ng-controller="testC">{{content}}<say-hello speak="content">美女</say-hello></div><script>angular.module("testApp",[]).controller('testC',function($scope){$scope.content="早上好";}).directive("sayHello",function(){return {restrict:'E',transclude:true,template:'<div>Hi ! <b ng-transclude></b>{{con}}{{content}}</div>',scope:{con:'=speak',},controller:function($scope){//$scope.con="hehe";//$scope.content="haha" }}})</script> </body> </html> View Code

controller：自定義指令的控制器

require : 'ngModel'或者形如'^?accordion'?ngModel是ng-model的控制器詳情，accordion是繼承其他的控制器， ^代表在父級(jí)作用域查找，？代表未查找到不拋出異常，默認(rèn)在自身作用域查找

link:function(scope,element,attribute,controller){}

　　scope:當(dāng)前作用域，element:當(dāng)前指令的DOM節(jié)點(diǎn),attribute：當(dāng)前指令的屬性，controller當(dāng)前指令的控制器

　　有人會(huì)問兩個(gè)controller？

　　關(guān)于directive里的link和controller區(qū)別？
　　1、執(zhí)行順序：先controller后link
　　2、何時(shí)使用controller：一般場(chǎng)景下都不想要使用controller，只需要把邏輯寫在link中就可以了；用controller的場(chǎng)景就是該指令（假設(shè)為a）會(huì)被其他指令（假設(shè)為b）require的時(shí)候，這樣就會(huì)在b指令的link函數(shù)中傳入這個(gè)controller（如果require多個(gè)的話，傳入的是一個(gè)數(shù)組，數(shù)組中存放的是每一個(gè)require的指令對(duì)應(yīng)的controller），目的很顯然是為了指令間進(jìn)行交流的。

compile這里就不介紹了只要就到這里，好像用了link就不需要compile...

下面是兩個(gè)實(shí)例的代碼，折疊和手風(fēng)琴

　　參考：http://www.360doc.com/content/15/0602/16/203871_475147642.shtml

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>折疊</title><script src="../Scripts/angular-1.5.8/angular.min.js"></script><script>var app=angular.module("myApp",[]);app.controller("testCtrl",function($scope){$scope.title="個(gè)人簡(jiǎn)介";$scope.text="我是一個(gè)程序員";})app.directive("expander",function(){return {restrict:'E',template:'<div><h3 ng-click="toggle()">{{title}}</h3><div ng-transclude ng-show="showText"></div></div>',transclude:true,replace:true,scope:{title:'=etitle'},link:function(scope,elem,attr,controller){scope.showText=false;scope.toggle=function(){scope.showText=!scope.showText;}}}})</script> </head> <body ng-app="myApp"><div ng-controller="testCtrl"><expander etitle="title">{{text}}</expander><expander etitle="title">{{text}}</expander></div> </body> </html> View Code <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>手風(fēng)琴</title><script src="../Scripts/angular-1.5.8/angular.min.js"></script><script>var app=angular.module("myApp",[]);app.controller("testCtrl",function($scope){$scope.expanders=[{title:'個(gè)人簡(jiǎn)介',text:'我是一個(gè)程序員'},{title:'個(gè)人簡(jiǎn)介1',text:'我是一個(gè)程序員'},{title:'個(gè)人簡(jiǎn)介2',text:'我是一個(gè)程序員'}]})app.directive("accordion",function(){return {restrict:'E',template:'<div ng-transclude></div>',transclude:true,replace:true,controller:function(){var expanders=[];this.getSelected=function(selected){angular.forEach(expanders,function(e){if(selected!=e){e.showText=false;}})}this.add=function(e){expanders.push(e);}}}})app.directive("expander",function(){return {restrict:'E',template:'<div><h3 ng-click="toggle()">{{title}}</h3><div ng-transclude ng-show="showText"></div></div>',transclude:true,replace:true,scope:{title:'=etitle'},require:'^?accordion',//'accordin'是在自身作用域查找，^ 在父作用域查找，？沒有查找到不會(huì)拋出異常 link:function(scope,elem,attr,controller){console.log(scope);scope.showText=false;controller.add(scope)scope.toggle=function(){scope.showText=!scope.showText;controller.getSelected(scope);}}}})/*1、執(zhí)行順序：先controller后link2、何時(shí)使用controller：一般場(chǎng)景下都不想要使用controller，只需要把邏輯寫在link中就可以了；用controller的場(chǎng)景就是該指令（假設(shè)為a）會(huì)被其他指令（假設(shè)為b）require的時(shí)候，這樣就會(huì)在b指令的link函數(shù)中傳入這個(gè)controller（如果require多個(gè)的話，傳入的是一個(gè)數(shù)組，數(shù)組中存放的是每一個(gè)require的指令對(duì)應(yīng)的controller），目的很顯然是為了指令間進(jìn)行交流的。*/</script> </head> <body ng-app="myApp"><div ng-controller="testCtrl"><accordion><expander ng-repeat="expander in expanders" etitle="expander.title">{{expander.text}}</expander></accordion></div> </body> </html> View Code

--內(nèi)容只是作為筆記，有些東西純屬仿照--

參考文檔：http://www.cnblogs.com/webHero/p/5770703.html

轉(zhuǎn)載于:https://www.cnblogs.com/tonghaolang/p/6040462.html

總結(jié)

以上是生活随笔為你收集整理的angular directive自定义指令的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： 1118. Birds in Fores
下一篇： git merge与rebase