關於Angularjs中自定義指令一些有價值的細節和技巧

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

一：自定義指令經常使用模板

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

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裏面的使用：

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

【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)。

六：經常使用方法或服務

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

$scope.getInfo=function(){
    console.log('這是執行了函數的表現');
};

var funName="getInfo()";

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