如何使用角度指令动态地使表单元素只读？

Posted 2023-05-09

【中文标题】如何使用角度指令动态地使表单元素只读？

【英文标题】：How can I dynamicly make form elements read-only with a directive in angular?

【发布时间】：2017-11-23 23:12:36

【问题描述】：

当指令的给定属性具有特定名称时，我想将某些元素（例如“选择、输入、文本区域、按钮”）只读。

此问题中的所有代码都被缩小以使其更清晰。

例如，此元素上有一个指令“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);
            
        
    ;
;

【参考方案1】：

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