關于Angularjs中自定義指令一些有價值的細節(jié)和技巧

Markxu 發(fā)布于2019-08-22 16:35 / 350人閱讀

摘要：屬性為時，指示優(yōu)先級小于當前指令的指令都不執(zhí)行，僅執(zhí)行到本指令。

作者：心葉
時間：2018-04-22 10:58

一：自定義指令常用模板

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

angular.module("yelloxingApp", []).directive("uiDirective", function() {

    return {
    
        restrict:String,//標明該指令可以在模板中用于元素E、屬性A、類C和注釋M或組合
        
        priority:Number,//設置指令執(zhí)行優(yōu)先級，在某個DOM上優(yōu)先級高的會先執(zhí)行
        
        terminal:Boolean,
        
        template:String or Template Function,//就是設置模板，和下面的templateUrl屬性二個只可以設置一個，目的一樣
        
        templateUrl:String or Template Function,//除了字符串，這二個屬性還可以設置函數(shù)
        
        replace:Boolean,//指令模板是否替換原來的元素
        
        scope:Boolean or Object,
        
        controller:String or function(scope, element, attrs) { ... },
        
        require:String or Array,
        
        //你需要知道link在每個實例都執(zhí)行一遍，compile全程只會執(zhí)行一遍
        link: function(scope, element, attrs,ctrl) { ... },
        
        compile:function(element, attrs) {
            //常用的就是compile的此處寫執(zhí)行一次的代碼，或者在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: `
            
            
            
            
                fromName={{newfromname}}
                這是從父級獲取到的{{_userDataName}}
            `,
            
        link: function($scope, element, attrs) {

            //使用@符號可將本地作用域的變量與DOM屬性的值進行綁定，即這里通過@得到父類fromName的值
            $scope.newfromname = $scope._fromName;
            $scope._useParentMethod = function() {
            
                //使用&符號可以在其中調(diào)用父類的方法
                $scope._onSend({ "email": { "email": "[email protected]" } });
                console.log($scope._userDataName);
                
            };
        }
    };
}]);

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

$scope.name = "心葉";

$scope.user = "yelloxing";

$scope.sendMail = function(email){
    console.error(email);
}

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

【require】

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

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

【terminal】

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

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

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

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

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

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

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

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

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

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

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

五：幾個零碎的技巧

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

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

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

六：常用方法或服務

解析一段字符串（可能是屬性也可能是方法）的方法有二個，直接看下面例子：

$scope.getInfo=function(){
    console.log("這是執(zhí)行了函數(shù)的表現(xiàn)");
};

var funName="getInfo()";

//執(zhí)行方法一：
$scope.$eval(funName);
//執(zhí)行方法二：
$parse(funName)($scope);

GPU云服務器云服務器關于中文域名的銷售技巧軟件定義存儲的核心價值大云軟件定義存儲支持的指令架構有價值的區(qū)塊鏈

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/94489.html

這5篇文章將使你成為一個Angular Change Detection專家。

摘要：編寫工作首先介紹了一個稱為的內(nèi)部組件表示，并解釋了變更檢測過程在視圖上運行。本文主要由兩部分組成第一部分探討錯誤產(chǎn)生的原因，第二部分提出可能的修正。它對我意義重大，它能幫助其他人看到這篇文章。在過去的8個月里，我大部分空閑時間都是reverse-engineering Angular。我最感興趣的話題是變化檢測。我認為它是框架中最重要的部分，因為它負責像DOM更新、輸入綁定和查詢列表...

Coly 2019-08-21 17:57 評論0 收藏0
【譯】《精通使用AngularJS開發(fā)Web App》（四）--- 深入視圖，模板系統(tǒng)，模塊和依賴注

摘要：模塊和依賴注入細心的讀者可能已經(jīng)發(fā)現(xiàn)了，到目前為止所用到的例子都是使用的全局的構造函數(shù)來定義控制器的。這非常的簡單，只需使用如下參數(shù)來調(diào)用即可控制器的名字字符串類型控制器的構造函數(shù)全局定義的控制器構造函數(shù)只適用于快速示例和原型開發(fā)。上一篇：【譯】《精通使用AngularJS開發(fā)Web App》（三）下一篇：書名：Mastering Web Application Develop...

zr_hebo 2019-08-19 14:29 評論0 收藏0
angularJS directive用法詳解

摘要：可選參數(shù)，布爾值或者對象默認值為，可能取值默認值。布爾值或者字符，默認值為這個配置選項可以讓我們提取包含在指令那個元素里面的內(nèi)容，再將它放置在指令模板的特定位置。前言最近學習了下angularjs指令的相關知識，也參考了前人的一些文章，在此總結(jié)下。歡迎批評指出錯誤的地方。 Angularjs指令定義的API showImg(https://segmentfault.com/img...

hlcc 2019-08-20 11:09 評論0 收藏0
JSDuck 與 AngularJS 融合技巧

摘要：融合思路解決這個問題，有兩種思路。給我們帶來了以下新成員模塊服務指令篩選器和控制器。與其他類是通過類的名稱區(qū)分的，名稱統(tǒng)一以結(jié)尾。這種處理方式是一種折中方案，如果想要更加規(guī)范優(yōu)雅的話，建議使用自定義標簽來解決。字數(shù)：1568 閱讀時間：10分鐘前言 ??前面，我們以一個實戰(zhàn)案例來詳細說明了如何在實際開發(fā)中使用JSDuck工具。但是，并不是所有的時候，代碼的封裝方式都受我們控制的。...

CarterLi 2019-08-21 18:41 評論0 收藏0
Angularjs 開發(fā)指南自定義指令（custom directives）

摘要：使用開發(fā)，很重要的一步是需要開發(fā)自定義的指令。接下來分幾個步驟記錄如何開發(fā)一個自定義的指令。對這個元素及其子元素進行變形之類的操作是安全的。鏈接函數(shù)鏈接函數(shù)負責注冊事件和更新。說明和是指令的關鍵部分，留在下一章中詳細討論。使用Angularjs開發(fā)，很重要的一步是需要開發(fā)自定義的指令（custom directives）。接下來分幾個步驟記錄如何開發(fā)一個自定義的指令。目錄：指令...

calx 2019-08-19 18:15 評論0 收藏0