I want to achieve read/write access control for select input using angularjs and angular-ui (particularly ui-select2 feature). Scenario is simple: by using ng-readonly attribute I can control whether given input value can be changed by user or not.
我想使用angularjs和angular-ui(特别是ui-select2特性)实现对选择输入的读/写访问控制。场景很简单:通过使用ng-readonly属性,我可以控制给定的输入值是否可以由用户改变。
<input id="clientShortName" class="span4" type="text" ng-readonly="readOnly" ng-model="client.shortName" />
<input ui-select2="{ tags: sometags}" id="clientTagsSelection" class="span4" type="text" ng-readonly="readOnly" ng-model="client.tagsSelection"/>
<input type="button" value="Edit" ng-click="readOnly = !readOnly"/>
This works fine for standard angularjs but when I'm trying to use inputs defined by angular-ui it doesn't work (doesn't change the read/write state of input).
这适用于标准的angularjs,但当我尝试使用由angular-ui定义的输入时,它不起作用(不会改变输入的读/写状态)。
Full scenario is covered here: http://plnkr.co/edit/pKs4Tq
完整的场景在这里介绍:http://plnkr.co/edit/pKs4Tq
1 个解决方案
#1
3
Unfortunately the AngularUI ui-select2
directive has no integration with the angularJS ng-readonly
directive.
不幸的是,AngularUI ui-select2指令没有与angularJS ng-readonly指令集成。
One way for you to overcome this is to create your own directive and watch for changes on the readOnly
property, like this:
克服这个问题的一种方法是创建您自己的指令并观察readOnly属性的更改,如下所示:
app.directive('csReadonly', function() {
return {
restrict: "A",
link: function(scope, iElement, iAttrs, controller) {
scope.$watch(iAttrs.csReadonly, function(readonly) {
iElement.select2(readonly ? 'disable' : 'enable');
});
}
}
});
And use it like this:
像这样使用它:
<input ui-select2="{ tags: sometags }" cs-readonly="readOnly" ... />
Plunker: http://plnkr.co/edit/LBFDg2
砰砰作响:http://plnkr.co/edit/LBFDg2
The advantage of the approach is that, if in the future AngularUI decides to include support for the ng-readonly
, you will only have to replace cs-
with ng-
and you're done.
这种方法的优点是,如果将来AngularUI决定包含对ng-readonly的支持,那么只需用ng替换cs即可。
#1
3
Unfortunately the AngularUI ui-select2
directive has no integration with the angularJS ng-readonly
directive.
不幸的是,AngularUI ui-select2指令没有与angularJS ng-readonly指令集成。
One way for you to overcome this is to create your own directive and watch for changes on the readOnly
property, like this:
克服这个问题的一种方法是创建您自己的指令并观察readOnly属性的更改,如下所示:
app.directive('csReadonly', function() {
return {
restrict: "A",
link: function(scope, iElement, iAttrs, controller) {
scope.$watch(iAttrs.csReadonly, function(readonly) {
iElement.select2(readonly ? 'disable' : 'enable');
});
}
}
});
And use it like this:
像这样使用它:
<input ui-select2="{ tags: sometags }" cs-readonly="readOnly" ... />
Plunker: http://plnkr.co/edit/LBFDg2
砰砰作响:http://plnkr.co/edit/LBFDg2
The advantage of the approach is that, if in the future AngularUI decides to include support for the ng-readonly
, you will only have to replace cs-
with ng-
and you're done.
这种方法的优点是,如果将来AngularUI决定包含对ng-readonly的支持,那么只需用ng替换cs即可。