[英]Passing a function to an Angular validation directive
我有以下代碼,請注意input
字段上的名稱有效和驗證功能標簽。
<form name="createForm" novalidate>
<div style="display: flex; width: 300px">
<div style="flex: 3;">
Name
</div>
<div style="flex: 5;">
<input type="text" name="listName" ng-model="newListName"
ng-minlength="3" name-valid validation-function="someFunction"/>
</div>
</div>
<div ng-show="createForm.listName.$error.unique &&
!renameGoldenForm.listName.$error.minlength">already exists</div>
<div ng-show="createForm.listName.$error.minlength">too short</div>
<div style="margin-top: 10px">
<button ng-click="createList()" ng-disabled="createForm.listName.$invalid">
Create</button>
</div>
</form>
這是JS:
window.angular.module("myModule").directive("nameValid", [
"$log",
function($log) {
return {
require: "ngModel",
scope: {
validationFunction: "="
},
link: function(scope, ele, attrs, c) {
scope.$watch(attrs.ngModel, function() {
var v = scope[attrs.ngModel];
if (!v || !((v).trim()) || v.length < 4) {
c.$setValidity("unique", true);
c.$setValidity("minlength", false);
return;
}
scope.validationFunction(v, scope.selectedListId)
.success(function(data) {
c.$setValidity("unique", data.unique);
c.$setValidity("minlength", data.minlength);
});
});
}
};
}
]);
問題在於,要求和范圍似乎已中斷。 有沒有辦法將自定義驗證功能傳遞給我的指令? 我不確定該怎么做。 我試過刪除require: 'ngModel'
並在scope
添加ngModel
,但這也不起作用。 如果我刪除scope
並對其進行硬編碼,則可以在watch塊中使用該函數,但這很有效,但是顯然,這違背了指向特定函數的指針的目的。
要將控制器功能綁定到指令,您必須使用&
綁定(表達式綁定),該指令允許指令調用由DOM屬性定義的表達式或函數。
例如 :
調節器
(function(){
function Controller($scope, $q) {
//Declare the func which will be bind to the directive
$scope.func = function (data1, data2) {
return new $q(function(resolve){
resolve(data1 === data2);
});
}
}
angular
.module('app', [])
.controller('ctrl', Controller);
})();
然后,我們將該函數綁定到您的指令中,然后可以將其調用到link
函數中。
指示
(function(){
function directive() {
return{
restrict: 'AE',
scope: {
function: '&'
},
link:function(scope, element, attrs) {
//Then, pass an object as argument to your function
var promise = scope.function({data1: 5, data2: 5});
//Retrieve result
promise.then(function(data){
console.log(data);
});
}
};
}
angular
.module('app')
.directive('directive', directive);
})();
最后,您可以使用函數屬性調用指令,以將函數綁定到指令。
HTML
<body ng-app="app" ng-controller="ctrl">
<directive function="func(data1, data2)"></directive>
</body>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.