Javascript 如何在指令内设置ng disabled

我的指令已经生效

link: function ($scope, $elm, $attrs) {
    var status = $scope.item.status
    if (status) {
        var statusName = status.name,
            item = $scope.item;
        if (statusName === 'USED') {
            $attrs.$set('ng-disabled', true); // this doesn't work
        } else {
            $elm.attr('ng-disabled', false);
        }
    }
}

所以，我的问题是：

---

如何使用此指令将ng disabled应用于元素？

您可以将ng disabled设置为范围变量，例如：

<input ng-disabled="isDisabled" />

//html
//js
"严格使用",；
var-app=angular.module（'miniapp'，[]）；
应用程序指令（'mydir'，函数（$compile）{
返回{
优先级：1001，//首先编译
terminal:true，//防止在它之后编译低优先级指令
编译：函数（el）{
el.removeAttr（'mydir'）；//避免无限编译循环所必需的
返回函数（范围）{
变量状态=scope.item.status
如果（状态==‘已使用’）{
el.属性（“ng-禁用”，真实）；
}否则{
el.attr（'ng-disabled'，false）；
}
var fn=$compile（el）；
fn（范围）；
};
}
};
});
应用程序控制器（'MainCtrl'，函数（$scope）{
$scope.item={}；
$scope.item.status='USED'；
});

归功于

---

为什么要调用ng disable呢？您已经自己对条件进行了一次评估，因此让ng disable再次对其进行评估是多余的

这个解决方案比whisher的好吗？我认为这是一个可读性问题——在标记中禁用

ng

比在IMO中动态添加它要好，但两者都有相同的结果。这是一种有角度的方法：避免操纵DOM。谢谢你的回答。我不记得为什么我用“ng disabled”而不是“disabled”：（根据文档——HTML规范不要求浏览器保留布尔属性（如disabled）的值。（它们的存在表示true，不存在表示false。）如果我们将角度插值表达式放入这样的属性中，那么当浏览器删除该属性时，绑定信息将丢失。ngDisabled指令解决了禁用属性的此问题。浏览器不会删除此补充指令，因此为存储绑定信息提供了一个永久可靠的位置。@Craig感谢您的更正，但我仍然不明白为什么在这种特殊情况下使用ng disabled会更好。你能解释一下吗？我本质上是在删除和添加禁用的属性，所以浏览器是否丢弃它的值应该无关紧要，对吗？在使用Angular时，您希望尽量避免操纵DOM。@Thierry J。为什么？Angular绝对适合修改DOM。但是使用指令执行。如果item.status稍后更改，这是否也会更改ng disabled的值？

$scope.isDisabled = true;

//html
<div ng-app="miniapp" ng-controller="MainCtrl">
    <input type="submit" mydir>
</div>
//js
'use strict';
            var app = angular.module('miniapp', []);
            app.directive('mydir', function ($compile) {
                return {
                    priority:1001, // compiles first
                    terminal:true, // prevent lower priority directives to compile after it
                    compile: function(el) {
                        el.removeAttr('mydir'); // necessary to avoid infinite compile loop
                        return function(scope){
                            var status = scope.item.status
                            if (status === 'USED') {
                                el.attr('ng-disabled',true);
                            } else {
                                el.attr('ng-disabled',false);
                            }
                            var fn = $compile(el);
                            fn(scope);
                        };
                    }


                };
            });
            app.controller('MainCtrl', function ($scope) {
                $scope.item = {};
                $scope.item.status = 'USED';
            });

if (statusName === 'USED') {
    $attrs.$set('disabled', 'disabled');
} else {
    $elm.removeAttr('disabled');
}