angularjs - 如何使 angular-ui 输入与 angularjs 属性(尤其是 ng-readonly)配合？

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" ... />

普朗克 : http://plnkr.co/edit/LBFDg2

这种方法的优点是，如果将来 AngularUI 决定支持 ng-readonly ，您只需更换 cs-与 ng-你就完成了。