我想使用 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"/>
这对于标准 AngularJS 来说效果很好,但是当我尝试使用 Angular-UI 定义的输入时,它不起作用(不会改变输入的读/写状态)。
此处涵盖了完整的场景:http://plnkr.co/edit/pKs4Tq
最佳答案
不幸的是,AngularUI ui-select2
指令没有与 angularJS ng-readonly
指令集成。
克服这个问题的一种方法是创建自己的指令并监视 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');
});
}
}
});
并像这样使用它:
<input ui-select2="{ tags: sometags }" cs-readonly="readOnly" ... />
骗子:http://plnkr.co/edit/LBFDg2
该方法的优点是,如果将来 AngularUI 决定包含对 ng-readonly
的支持,您只需将 cs-
替换为 ng-
就完成了。
关于angularjs - 如何使 Angular-UI 输入与 AngularJS 属性(特别是 ng-readonly)配合?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13765958/