小編給大家分享一下Angularjs中自定義指令的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)建站是一家集網(wǎng)站建設(shè),石臺(tái)企業(yè)網(wǎng)站建設(shè),石臺(tái)品牌網(wǎng)站建設(shè),網(wǎng)站定制,石臺(tái)網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷,網(wǎng)絡(luò)優(yōu)化,石臺(tái)網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

一：自定義指令常用模板

下面是大致的說(shuō)明，不是全面的，后面來(lái)具體說(shuō)明一些沒(méi)有提及的細(xì)節(jié)和重要的相關(guān)知識(shí)：

angular.module('yelloxingApp', []).directive('uiDirective', function() {
  return {  
    restrict:String,//標(biāo)明該指令可以在模板中用于元素E、屬性A、類C和注釋M或組合    
    priority:Number,//設(shè)置指令執(zhí)行優(yōu)先級(jí)，在某個(gè)DOM上優(yōu)先級(jí)高的會(huì)先執(zhí)行
        terminal:Boolean,    
    template:String or Template Function,//就是設(shè)置模板，和下面的templateUrl屬性二個(gè)只可以設(shè)置一個(gè)，目的一樣    
    templateUrl:String or Template Function,//除了字符串，這二個(gè)屬性還可以設(shè)置函數(shù)    
    replace:Boolean,//指令模板是否替換原來(lái)的元素    
    scope:Boolean or Object,
    controller:String or function(scope, element, attrs) { ... },    
    require:String or Array,    
    //你需要知道link在每個(gè)實(shí)例都執(zhí)行一遍，compile全程只會(huì)執(zhí)行一遍
    link: function(scope, element, attrs,ctrl) { ... },    
    compile:function(element, attrs) {
      //常用的就是compile的此處寫(xiě)執(zhí)行一次的代碼，或者在link方法里面寫(xiě)和dom有關(guān)的操作
    }
  };
});

二：一些屬性說(shuō)明

【scope】

可以設(shè)置boolean或者對(duì)象，先來(lái)說(shuō)說(shuō)boolean，這個(gè)比較簡(jiǎn)單：

1.當(dāng)設(shè)置true的時(shí)候，表示繼承父scope，是一個(gè)子scope；

2.當(dāng)設(shè)置false的時(shí)候，直接使用父scope。

還有一種對(duì)象設(shè)置方法，就是設(shè)置一種隔離的scope，在使用隔離scope的時(shí)候，提供了三種方法同隔離之外的地方交互，下面用一個(gè)例子來(lái)一一說(shuō)明：

angular.module('yelloxingApp', []).directive("scopeExample", ['$rootScope', function($rootScope) {
  return {
    restrict: 'A',    
    scope: {
      _userDataName: "=userDataName",
      _onSend: "&onSend",
      _fromName: "@fromName"
    },    
    template: `
      <button ng-click="_useParentMethod()">
        點(diǎn)擊按鈕調(diào)用父級(jí)的方法
      </button>
      
      <input ng-model="_userDataName"/>
      <ul>
        <li>fromName={{newfromname}}</li>
        <li>這是從父級(jí)獲取到的{{_userDataName}}</li>
      </ul>`,
       link: function($scope, element, attrs) {
      //使用@符號(hào)可將本地作用域的變量與DOM屬性的值進(jìn)行綁定，即這里通過(guò)@得到父類fromName的值
      $scope.newfromname = $scope._fromName;
      $scope._useParentMethod = function() {      
        //使用&符號(hào)可以在其中調(diào)用父類的方法
        $scope._onSend({ "email": { "email": "yelloxing@gmail.com" } });
        console.log($scope._userDataName);        
      };
    }
  };
}]);

上面是指令的寫(xiě)法，下面來(lái)看看控制器里面有什么：

$scope.name = "心葉";
$scope.user = "yelloxing";
$scope.sendMail = function(email){
  console.error(email);
}

最后別忘了html里面的使用：

復(fù)制代碼 代碼如下:

<div scope-example user-data-name="user" on-send='sendMail(email)' from-name={{name}}></div>

【require】

請(qǐng)求另外的controller，然后作為link方法的第四個(gè)參數(shù)傳遞進(jìn)去，我們需要注意的是查找控制器的方法。

查找控制器的方法可以這樣理解：使用？表示如果在當(dāng)前指令中沒(méi)有找到所需要的控制器，會(huì)將null作為傳給link函數(shù)的第四個(gè)參數(shù)，如果添加了^前綴，指令會(huì)在上游的指令鏈中查找require參數(shù)所指定的控制器，他們也可以組合，比如require: "?^ngModel"，如果沒(méi)有前綴，指令將會(huì)在自身所提供的控制器中進(jìn)行查找，如果沒(méi)有找到任何控制器（或具有指定名字的指令）就拋出一個(gè)錯(cuò)誤。

【terminal】

屬性terminal:為true時(shí)，指示優(yōu)先級(jí)小于當(dāng)前指令的指令都不執(zhí)行，僅執(zhí)行到本指令。

三：視圖和model之間的數(shù)據(jù)格式化

類似過(guò)濾器的功能，有時(shí)候我們希望頁(yè)面顯示的是數(shù)據(jù)經(jīng)過(guò)某種翻譯后的樣子，以便于約定，不過(guò)對(duì)于數(shù)據(jù)庫(kù)也許簡(jiǎn)單的序號(hào)會(huì)更有益，因此你可能會(huì)需要在link中使用下面的方法來(lái)實(shí)現(xiàn)這個(gè)功能：

1.ctrl.$formatters.unshift(function(input) {//model到view的數(shù)據(jù)格式化})；

2.ctrl.$parsers.unshift(function(input) {//view到model的數(shù)據(jù)格式化})。

上面的$formatters和$parsers就是二個(gè)隊(duì)列，視圖到model和model到視圖，會(huì)方便經(jīng)過(guò)里面定義的方法的過(guò)濾，有點(diǎn)類似管道流，最后流到目的地。

別忘了設(shè)置類似require: "?ngModel"這樣的語(yǔ)句去查找控制器。

四：視圖和model數(shù)據(jù)同步問(wèn)題

有時(shí)候在指令里面通過(guò)jquery修改了input的數(shù)據(jù)，不過(guò)angularjs并不會(huì)知道，這時(shí)候，你可以選擇下面中的一個(gè)方法：

1.觸發(fā)輸入框change改變，讓Angularjs發(fā)現(xiàn)數(shù)據(jù)改變了，從而去調(diào)用$setViewValue(value),同步數(shù)據(jù)：$("input").trigger("change");

2.直接手動(dòng)觸發(fā)同步value到viewValue和modelValue中的行為：ctrl.$setViewValue($scope.info)。

五：幾個(gè)零碎的技巧
1.根據(jù)輸入框是否合法來(lái)設(shè)置true或false：ctrl.$setValidity(errorType, boolean);//errorType表示錯(cuò)誤類別，可以自定義

2.設(shè)置監(jiān)聽(tīng)指定的一個(gè)model值，當(dāng)然還有監(jiān)聽(tīng)集合等方法：$scope.$watch(attrs['ngModel'], function(newValue, oldValue) {});

3.有時(shí)候在指令里面新添加的字符串需要被angularjs管理，就可以用下面的方法編譯一下：$compile(newHtml)($scope)。

以上是“Angularjs中自定義指令的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

網(wǎng)頁(yè)題目：Angularjs中自定義指令的示例分析-創(chuàng)新互聯(lián)
地址分享：http://www.chinadenli.net/article40/dcjpeo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開(kāi)發(fā)、電子商務(wù)、App開(kāi)發(fā)、搜索引擎優(yōu)化、服務(wù)器托管、手機(jī)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)