小編給大家分享一下angularJS如何實現(xiàn)自定義指令間的相互交互,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
AngularJS 自定義指令
transclude:當元素標簽需要嵌套時使用,與ng-transclude配合使用。默認值為false不能使用嵌套,true為可以使用嵌套。在哪個標簽上使用ng-transclude就在哪個標簽內(nèi)進行嵌套。
代碼示例:(將hello、hi標簽進行替換同時span標簽嵌套div內(nèi))
<script type="text/javascript"> var m = angular.module('myApp',[]); m.directive('hello',function(){ return{ restrict:'E', replace:true, transclude:true, template:'<div>hello angular<h2 ng-transclude></h2></div>' }; }); m.directive('hi',function(){ return{ restrict:'E', replace:true, template:'<span>hi angular</span>' }; }); m.controller('Aaa',['$scope',function($scope){ $scope.name='hello'; }]); </script> <body ng-controller="Aaa"> <hello> <hi></hi> </hello> </body>
頁面結(jié)果展示:
在自定義指令當中controller與link的區(qū)別:
link是指DOM操作,操作也是針對當前標簽
controller是多調(diào)用性的數(shù)據(jù)共享,指令與指令間進行交互時也可以設(shè)置一些方法數(shù)據(jù),在其他標簽中也可以調(diào)用
require:從外部引入數(shù)據(jù),參數(shù)為被引入的指令,被引入的指令需要在引入指令的身上。
》^:是指被引入的指令是引入指令的父級
》?:兼容錯誤
代碼示例:
<script type="text/javascript"> var m = angular.module('myApp',[]); m.directive('hello',function(){ return{ restrict:'E', replace:true, transclude:true, controller:function($scope){ //$scope.name='miaov';只能在該標簽中使用 this.name = 'miaov';//可以在其他標簽中調(diào)用 }, template:'<div>hello angular<h2 ng-transclude></h2></div>' }; }); m.directive('hi',function(){ return{ restrict:'E', replace:true, require:'?^hello',//從外部引入指令,參數(shù)為被引入的標簽 link:function($scope,element,attr,reController){ console.log(reController.name); }, template:'<span>hi angular</span>' }; }); m.controller('Aaa',['$scope',function($scope){ $scope.name='hello'; }]); </script> <body ng-controller="Aaa"> <hello> <hi></hi> </hello> </body>
頁面結(jié)果展示:
以上是“angularJS如何實現(xiàn)自定義指令間的相互交互”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學習更多知識,歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道!
另外有需要云服務器可以了解下創(chuàng)新互聯(lián)建站jinyejixie.com,海內(nèi)外云服務器15元起步,三天無理由+7*72小時售后在線,公司持有idc許可證,提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢,專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應用場景需求。
名稱欄目:angularJS如何實現(xiàn)自定義指令間的相互交互-創(chuàng)新互聯(lián)
轉(zhuǎn)載源于:http://jinyejixie.com/article26/heecg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供軟件開發(fā)、App設(shè)計、動態(tài)網(wǎng)站、標簽優(yōu)化、網(wǎng)站導航、網(wǎng)站制作
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)