javascript - 如何使用 Angular Directive(指令)动态使表单元素只读？

Question

当指令的给定属性具有特定名称时，我想将某些元素(例如“select、input、textarea、button”)设为只读。

All the code in this question is minified to make it more clear.

例如，此元素上有一个指令“dynamic-input-field”:

<ui-select ng-model="controllerData.header.subsidiary"
         theme="bootstrap"
         class="googleSearch"
         ng-disabled="quotationData.readOnly || isFieldDisabled('subsidiary')" 
         on-select="subsidiaryChanged(controllerData.header.subsidiary)"
         dynamic-input-field="A">
    <ui-select-match allow-clear="true" autofocus="true" placeholder="Subsidiary">{{$select.selected.description}}</ui-select-match>
    <ui-select-choices repeat="subsidiary in presetData.subsidiariesChange | filter: {'description': $select.search}">
        <div ng-bind-html="subsidiary.description | highlight: $select.search"></div>
    </ui-select-choices>
</ui-select>

使用此指令，我想在该 ui-select 元素具有特定名称时禁用该元素(在本例中为 "A")

我已经尝试了很多可能性，但我找不到合适的方法来做到这一点。这是我的指令:

'use strict';

/**
 * @ngInject
 */
module.exports = function() {
    return {
        restrict: 'A',
        compile: function (element, attrs) {
            if (attrs.dynamicInputField === "A" ) {
                // I have tried all these options but it doesn't seem to disable the select element
                // element.prop('disabled', 'disabled');
                // element.attr("ng-disabled", 'isReadOnly');
                // element.attr("ng-disabled", 'true');
                // element.attr("ng-disabled", true);
                // element.attr("ng-disabled", 'disabled');
                // element.prop('readonly', true);
            }
        }
    };
};

Answer 1

恐怕选择器无法正确处理“只读”。我建议您改用“disabled”，但在这种情况下，您似乎已经有一个使用它的指令。