Question

我正在尝试向表单字段添加HTML属性，以便在JSON文件中属性为true时禁用它。

在我的表单字段中，我添加了data-is-disabled={{field.rules.disabled}}，这是从JSON中读入的以下内容

"rules" : {
    "disabled": "true"
}

然后我在我的模块中有一个指令，我希望删除该属性并将其替换为disabled属性以禁用该字段。

app.directive ('isDisabled', function($compile) {
    return {
        restrict: 'A',
        compile: function (element) {
            element.removeAttr("data-is-disabled");
            element.attr("disabled");
            var fn = $compile(element);
            return function(scope){
                fn(scope);
            };
        }
    }
});

这似乎过于复杂，但是对于多种不同的字段类型情况是必要的，在这种情况下需要禁用字段。

我已经尝试了几种不同的解决方案，但是我还没有开始工作。该属性保留为data-is-disabled="true"。

非常感谢提前。

Answer 1

使它更简单并使用它。

https://docs.angularjs.org/api/ng/directive/ngDisabled

ng-disabled={{field.rules.disabled}}

小心并检查数据，因为true是一个字符串，而不是......

ng-disabled={{JSON.parse(field.rules.disabled)}}

Answer 2

使用此链接属性：

directive ('isDisabled', function() {
    return {
        restrict: 'A',
        scope : {
          isDisabled : "="
        },
        link : function(scope, ele, attr){
          if(scope.isDisabled){
            ele.attr("disabled", true);
          }
        }
}

请参阅链接：https://plnkr.co/edit/01JnAyDEce2p43aHlL83?p=preview

使用Angular动态添加HTML属性

2 个答案: