作者：心恭弘=叶 恭弘
時刻：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);
