使用Angular动态添加HTML属性

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);
            };
        }
    }
});

它看起来过于复杂，但是对于多种不同的字段类型情况则是必需的，在这种情况下，必须禁用该字段。

我从SO那里尝试了几种不同的解决方案，但是我还没有开始工作。 该属性保留为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