Angularjs中自定義指令的示例分析-創新互聯

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

創新互聯建站是一家集網站建設,石臺企業網站建設,石臺品牌網站建設,網站定制,石臺網站建設報價,網絡營銷,網絡優化,石臺網站推廣為一體的創新建站企業，幫助傳統企業提升企業形象加強企業競爭力。可充分滿足這一群體相比中小企業更為豐富、高端、多元的互聯網需求。同時我們時刻保持專業、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學習、思考、沉淀、凈化自己，讓我們為更多的企業打造出實用型網站。

一：自定義指令常用模板

下面是大致的說明，不是全面的，后面來具體說明一些沒有提及的細節和重要的相關知識：

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

二：一些屬性說明

【scope】

可以設置boolean或者對象，先來說說boolean，這個比較簡單：

1.當設置true的時候，表示繼承父scope，是一個子scope；

2.當設置false的時候，直接使用父scope。

還有一種對象設置方法，就是設置一種隔離的scope，在使用隔離scope的時候，提供了三種方法同隔離之外的地方交互，下面用一個例子來一一說明：

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

上面是指令的寫法，下面來看看控制器里面有什么：

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

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

復制代碼代碼如下:

【require】

請求另外的controller，然后作為link方法的第四個參數傳遞進去，我們需要注意的是查找控制器的方法。

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

【terminal】

屬性terminal:為true時，指示優先級小于當前指令的指令都不執行，僅執行到本指令。

三：視圖和model之間的數據格式化

類似過濾器的功能，有時候我們希望頁面顯示的是數據經過某種翻譯后的樣子，以便于約定，不過對于數據庫也許簡單的序號會更有益，因此你可能會需要在link中使用下面的方法來實現這個功能：

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

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

上面的$formatters和$parsers就是二個隊列，視圖到model和model到視圖，會方便經過里面定義的方法的過濾，有點類似管道流，最后流到目的地。

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

四：視圖和model數據同步問題

有時候在指令里面通過jquery修改了input的數據，不過angularjs并不會知道，這時候，你可以選擇下面中的一個方法：

1.觸發輸入框change改變，讓Angularjs發現數據改變了，從而去調用$setViewValue(value),同步數據：$("input").trigger("change");

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

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

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

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

以上是“Angularjs中自定義指令的示例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創新互聯成都網站設計公司行業資訊頻道！

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

網頁題目：Angularjs中自定義指令的示例分析-創新互聯
地址分享：http://m.kartarina.com/article40/dcjpeo.html

成都網站建設公司_創新互聯，為您提供定制開發、電子商務、App開發、搜索引擎優化、服務器托管、手機網站建設

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創新互聯

猜你還喜歡下面的內容