ปรับปรุง:
เวอร์ชันก่อนหน้าที่ได้รับการปรับปรุงและง่ายขึ้นของคำสั่งก่อนหน้า (หนึ่งแทนสอง) ด้วยฟังก์ชันการทำงานเดียวกัน
.directive('myTestExpression', ['$parse', function ($parse) {
return {
restrict: 'A',
require: 'ngModel',
link: function (scope, element, attrs, ctrl) {
var expr = attrs.myTestExpression;
var watches = attrs.myTestExpressionWatch;
ctrl.$validators.mytestexpression = function (modelValue, viewValue) {
return expr == undefined || (angular.isString(expr) && expr.length < 1) || $parse(expr)(scope, { $model: modelValue, $view: viewValue }) === true;
};
if (angular.isString(watches)) {
angular.forEach(watches.split(",").filter(function (n) { return !!n; }), function (n) {
scope.$watch(n, function () {
ctrl.$validate();
});
});
}
}
};
}])
ตัวอย่างการใช้งาน:
<input ng-model="price1"
my-test-expression="$model > 0"
my-test-expression-watch="price2,someOtherWatchedPrice" />
<input ng-model="price2"
my-test-expression="$model > 10"
my-test-expression-watch="price1"
required />
ผลลัพธ์: นิพจน์ทดสอบที่ต้องพึ่งพาซึ่งกันและกันจะดำเนินการตัวตรวจสอบความถูกต้องเมื่อมีการเปลี่ยนแปลงโมเดลคำสั่งและโมเดลปัจจุบันของผู้อื่น
นิพจน์ทดสอบมี$modelตัวแปรโลคัลซึ่งคุณควรใช้เพื่อเปรียบเทียบกับตัวแปรอื่น
ก่อนหน้านี้:
ฉันพยายามปรับปรุง @Plantface code โดยการเพิ่มคำสั่งพิเศษ คำสั่งพิเศษนี้มีประโยชน์มากหากการแสดงออกของเราจำเป็นต้องดำเนินการเมื่อมีการเปลี่ยนแปลงในตัวแปร ngModel มากกว่าหนึ่งตัว
.directive('ensureExpression', ['$parse', function($parse) {
return {
restrict: 'A',
require: 'ngModel',
controller: function () { },
scope: true,
link: function (scope, element, attrs, ngModelCtrl) {
scope.validate = function () {
var booleanResult = $parse(attrs.ensureExpression)(scope);
ngModelCtrl.$setValidity('expression', booleanResult);
};
scope.$watch(attrs.ngModel, function(value) {
scope.validate();
});
}
};
}])
.directive('ensureWatch', ['$parse', function ($parse) {
return {
restrict: 'A',
require: 'ensureExpression',
link: function (scope, element, attrs, ctrl) {
angular.forEach(attrs.ensureWatch.split(",").filter(function (n) { return !!n; }), function (n) {
scope.$watch(n, function () {
scope.validate();
});
});
}
};
}])
ตัวอย่างวิธีใช้เพื่อสร้างฟิลด์ที่ตรวจสอบข้าม:
<input name="price1"
ng-model="price1"
ensure-expression="price1 > price2"
ensure-watch="price2" />
<input name="price2"
ng-model="price2"
ensure-expression="price2 > price3"
ensure-watch="price3" />
<input name="price3"
ng-model="price3"
ensure-expression="price3 > price1 && price3 > price2"
ensure-watch="price1,price2" />
ensure-expressionจะดำเนินการเพื่อตรวจสอบรูปแบบเมื่อng-modelหรือมีการensure-watchเปลี่ยนแปลงตัวแปรใด ๆ