這次帶給大家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裡面的使用:
複製程式碼 程式碼如下:
c1fd1d06c71cfe5662e467de7c0801966fb279ad3fd4344cbdd93aac6ad173ac
【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)。
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
以上是Angularjs自訂指令在專案中如何使用的詳細內容。更多資訊請關注PHP中文網其他相關文章!