關於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: `
            e1f5a1ee9c6dca37bcd669731a393538
                点击按钮调用父级的方法
            65281c5ac262bf6d81768915a4a77ac0
            4274db3893f1db7d5323331011e4e7a9
            ff6d136ddc5fdfeffaf53ff6ee95f185
                25edfb22a4f469ecb59f1190150159c6fromName={{newfromname}}bed06894275b65c1ab86501b08a632eb
                25edfb22a4f469ecb59f1190150159c6这是从父级获取到的{{_userDataName}}bed06894275b65c1ab86501b08a632eb
            929d1f5ca49e04fdcb27f9465b944689`,
         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裡面的使用：

fbed9b0f6bf1f7e816b9b0d0c213b15694b3e26ee717c64999d7867364b1b4a3

【require】

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

尋找控制器的方法可以這樣理解：使用？表示如果在目前指令中找不到所需的控制器，會將null作為傳給link函數的第四個參數，如果加入了^前綴，指令會在上游的指令鏈中尋找require參數所指定的控制器，他們也可以組合，例如require: "?^ngModel"，如果沒有前綴，指令將會在自身所提供的控制器中進行查找，如果沒有找到任何控制器（或具有指定名字的指令）就拋出一個錯誤。 （想看更多就到PHP中文網AngularJS開發手冊中學習）

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

好了，這篇文章到這就結束了（想看更多就到PHP中文網AngularJS使用手冊中學習），有問題的可以在下方留言提問。

以上是關於Angularjs中自訂指令一些有價值的細節和技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章！