在 Angular js 中，我想创建一个验证器，当指定另一个值时，该验证器将导致 ng-model 值变得无效。现在我有一些适用于 Angular js 1.1.4 的东西(我使用它是因为我使用的是旧的 plunkr)，但是当我切换到 1.1.5 时，它停止工作。
我确信我在范围上做错了什么，但我不确定是什么。
这是我的代码(请点击:http://plnkr.co/edit/Ug9oM1LNqPpTsONhRTnG?p=preview)
var app = angular.module('angularjs-starter', []);
app.controller('MainCtrl', function($scope) {
$scope.doSomething = function () {
alert('Submitted!');
}
$scope.data = {};
$scope.data.value = new String('blah');
$scope.data.value.$$error = 'My Error';
$scope.data.toggleError = function() {
if ($scope.data.value.$$error) {
$scope.data.value.$$error = null;
}
else {
$scope.data.value.$$error = "SOME ERROR";
}
};
console.log($scope.data.value instanceof String);
});
app.directive('serverError', function (){
return {
require: 'ngModel',
scope:true,
link: function(scope, elem, attr, ngModel) {
scope.$watch('attr.errorValue', function() {
console.log("The error value is " + scope.errorValue);
ngModel.$setValidity('serverError', scope.errorValue == null);
});
}
};
});
这是我的 HTML:-
<!DOCTYPE html>
<html ng-app="angularjs-starter">
<head lang="en">
<meta charset="utf-8">
<title>Custom Plunker</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.3/angular.min.js"></script>
<link rel="stylesheet" href="style.css">
<script>
document.write('<base href="' + document.location + '" />');
</script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<form name="myForm" ng-submit="doSomething()">
<input type="text" name="fruitName" ng-model="data.value" serverError errorValue="data.value.$$error" />
<div>{{ data.value.$$error }}</div>
<span class="invalid" ng-if="myForm.fruitName.$error.serverError">
{{data.value.$$error}}
</span>
<br/>
<button type="submit" ng-disabled="myForm.$invalid">Submit</button>
<input type="button" ng-click="data.toggleError()" value="Toggle Error"/>
</form>
</body>
</html>
一旦我从 1.1.3 更改为 1.2.0，我的指令就停止工作。
最佳答案
我已经解决了。
http://plnkr.co/edit/Ug9oM1LNqPpTsONhRTnG?p=preview
该指令非常简单:-
app.directive('serverError', function($parse) {
return {
// restrict to an attribute type.
restrict: 'A',
// element must have ng-model attribute.
require: 'ngModel',
// scope = the parent scope
// elem = the element the directive is on
// attr = a dictionary of attributes on the element
// ctrl = the controller for ngModel.
link: function(scope, elem, attr, ctrl) {
scope.$watch(attr.serverError, function(newValue, oldValue) {
if (newValue != null) {
ctrl.$setValidity('serverError', false);
}
else {
ctrl.$setValidity('serverError', true);
}
});
}
};
});
关于javascript - 对另一个值使用react的验证指令在 1.0.x 中有效，但在 1.2.x 中无效，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25321749/