angularjs自定義指令
阿新 • • 發佈:2019-01-05
app.directive('nameunique', function($http) {
return {
require: 'ngModel',//require代表另一個指令的名字,它將會作為link函式的第四個引數
//引數說明 scope:指令需要監聽的作用域,ele:指令所在的元素,attrs:有宣告在當前元素上的屬性列表,ngmodelController:控制器例項,也就是當前指令通過require請求的指令內部的controller
link: function(scope, ele, attrs, ngmodelController) {
scope.$watch(attrs.ngModel, function(n) {//n為監控的值,此處就是attrs.ngModel
if(!n){
return;
}
$http({
method: 'POST',
url: 'url',
data: 'name='+ $('#name').val(),
headers : {
'Content-Type' : ''
}
}).success(function(data) {
if(data.data.length==0){
ngmodelController.$setValidity('nameunique', true);
}
else{
//已存在使用者名稱,$invalid為true
ngmodelController.$setValidity('nameunique', false);
}
}).error(function(data) {
ngmodelController.$setValidity('nameunique', false);
});
});
}
};
return {
require: 'ngModel',//require代表另一個指令的名字,它將會作為link函式的第四個引數
//引數說明 scope:指令需要監聽的作用域,ele:指令所在的元素,attrs:有宣告在當前元素上的屬性列表,ngmodelController:控制器例項,也就是當前指令通過require請求的指令內部的controller
link: function(scope, ele, attrs, ngmodelController) {
scope.$watch(attrs.ngModel, function(n) {//n為監控的值,此處就是attrs.ngModel
if(!n){
return;
}
$http({
method: 'POST',
url: 'url',
data: 'name='+ $('#name').val(),
headers : {
'Content-Type' : ''
}
}).success(function(data) {
if(data.data.length==0){
ngmodelController.$setValidity('nameunique', true);
}
else{
//已存在使用者名稱,$invalid為true
ngmodelController.$setValidity('nameunique', false);
}
}).error(function(data) {
ngmodelController.$setValidity('nameunique', false);
});
});
}
};
});
用於檢測使用者名稱唯一的指令