Question

我想使用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

Answer 1

不幸的是，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" ... />

Plunker ：http://plnkr.co/edit/LBFDg2

该方法的优点在于，如果将来AngularUI决定包含对ng-readonly的支持，您只需将cs-替换为ng-即可

如何使angular-ui输入与angularjs属性（特别是ng-readonly）配合？

1 个答案: