使用 Angular 动态添加 HTML 属性答案

【问题标题】：Adding HTML attributes dynamically with Angular使用 Angular 动态添加 HTML 属性
【发布时间】：2016-01-22 00:24:13
【问题描述】：

如果 JSON 文件中的属性为真，我正在尝试将 HTML 属性添加到表单字段以禁用它。

在我的表单字段中，我添加了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"。

非常感谢。

【问题讨论】：

标签： javascript html angularjs angularjs-directive

【解决方案1】：

让它更简单并使用它。

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

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

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

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

【讨论】：

哇，我不敢相信它居然这么简单！感谢您提供如此快速准确的答复！
没问题，几个月前我也遇到过同样的问题。

【解决方案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

【讨论】：

非常感谢@sandeep