首先是一些背景知识:我的应用程序允许用户通过管理工具控制是否需要、禁用字段等。我有一项服务采用字段名称并以如下格式返回用户定义的规则:
{
"disabled" : true,
"required" : true
}
我想要一个自定义属性指令,该指令将使用该服务控制输入字段上的这些属性。我希望用法看起来像这样:
<input type="text" my-rule="fieldName" ng-model="myfield" />
我可以使用如下指令轻松完成此操作:
angular.module('app').directive('myRule', ['$http',
function($http) {
return {
restrict: 'A',
scope: {
myRule: '@'
},
link: function(scope, element, attrs) {
$http.get('/api/rule/'+scope.myRule).success(function(rule) {
if (rule.disabled) {
element.attr('disabled','disabled');
}
if (rule.required) {
element.attr('required','required');
}
});
}
}
}
]);
我的问题是,如果用户没有禁用字段,我可能仍想禁用它,例如,直到填写了另一个字段。使用 ng-disabled
应该很容易做到这一点:
<input type="text" my-rule="fieldA" ng-model="fieldA" />
<input type="text" my-rule="fieldB" ng-model="fieldB" ng-disabled="!fieldA" />
但是,这不起作用,因为如果用户选择禁用 fieldB
,那么无论 ng-disabled
属性如何,该字段都应该始终被禁用,而不是 ng-disabled
属性覆盖用户的规则。如果该字段被用户禁用,我尝试了类似这样的方法来删除 ng-disabled
但这似乎没有效果:
angular.module('app').directive('myRule', ['$http',
function($http) {
return {
restrict: 'A',
scope: {
myRule: '@'
},
link: function(scope, element, attrs) {
$http.get('/api/rule/'+scope.myRule).success(function(rule) {
if (rule.disabled) {
element.attr('disabled','disabled');
element.removeAttr('ng-disabled');
}
if (rule.required) {
element.attr('required','required');
element.removeAttr('ng-required');
}
});
}
}
}
]);
这会删除该属性,但此时似乎为时已晚,只要填写了 fieldA
,该字段仍会启用。
如何动态删除自定义指令中的 ng-disabled
属性,使其不再对该字段产生影响?
更新:
我添加了一个代码片段来演示我的问题。
angular.module('app',[]).directive('myRule', ['$http',
function($http) {
return {
restrict: 'A',
scope: {
myRule: '@'
},
link: function(scope, element, attrs) {
// would normally be making an ajax call to get the rule
var rule = { disabled: scope.myRule != "fieldA" };
if (rule.disabled) {
element.attr('disabled','disabled');
element.removeAttr('ng-disabled');
}
}
}
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<p>Field B and Field C have been disabled by the user but since Field C includes an ng-disabled expression it will be incorrectly enabled when Field A is filled out.</p>
<input type="text" my-rule="fieldA" ng-model="fieldA" placeholder="Field A" />
<input type="text" my-rule="fieldB" ng-model="fieldB" placeholder="Field B" />
<input type="text" my-rule="fieldC" ng-model="fieldC" placeholder="Field C" ng-disabled="!fieldA" />
</div>
最佳答案
尝试使用prop('disabled', boolean)
而不是attr()
。这将更改并不总是与属性相同的元素属性。
由于您是在 Angular 之外操作 DOM,因此您可能还应该通过调用 scope.$apply()
或 $timeout()
不确定这是否可行,我认为您可能需要一个指令来包装整个输入。
一个建议是看一下angular-formly
,它构建了整个表单,包括来自对象模型的条件验证
关于javascript - 如何创建将覆盖 ng-disabled 的自定义 Angular Directive(指令)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31456556/