Angularjs 角度指令将范围监视设置为禁用按钮

我想根据范围更改禁用一个按钮

以下是我当前的指令代码：

function disabledButton(){
    return {
        restrict: 'EA',
        priority:1001,
        scope:{
            isLoading: '=loading'
        },
        link:(scope, element, attrs, isLoading)=>{
            scope.$watch('isLoading', () => {
                element.attr('disabled', true);
            });
       }
    }
}

我的html：

<button type="submit" class="pull-right" disabled-button>Update</button>

但它不起作用。按钮未被禁用

有解决办法吗

JSFIDLE 尝试使用AngularJS提供的指令

<button ng-model="button" ng-disabled="isLoading">Button</button>

按钮

使用

元素.prop（'disabled'，true）

而不是

element.attr（'disabled'，true）

另外，请确保在
$watch
语句中添加else语句以重新启用按钮。
链接
和
编译
不能一起工作

在指令定义对象中，如果您只定义链接，这就像是在
postLink
函数中使用空的
preLink
函数和您的代码创建空编译函数的简写。一旦定义了
compile
，
link
将被angular忽略，因为
compile
应返回链接函数

如果您只从
compile
返回一个函数，那么它将在链接后执行


angular.module（'app'，[]）
.controller（'myctrl'，函数（$scope，$timeout）{
$scope.loading=true；
$scope.change=函数（）{
$scope.loading=！$scope.loading；
}
})
.directive（'disabledButton'，function（）{
返回{
限制：“AE”，
范围：{
isLoading:“=”
},
编译：函数（）{
返回函数（范围、元素、属性）{
控制台日志（元素）；
var加载=scope.isLoading；
范围：$watch（'isLoading'，函数（a，b）{
元素属性（'disabled'，a）；
});
}
}
}
});

数字减影
更新
Hi。对不起，这是我最后的选择。我尝试使用指令保持我的html干净。所以我可以动态地调用它。Thanksng disabled是一个指令，请参见Yes。我试着不让我的每一个按钮都被禁用。谢谢。@Tome Pejoski，您应该修改现有答案，而不是添加新答案。@SajanChandran包含代码的方法不同。另外，我的第一个问题是正确的，但提出问题的用户不想使用它：）请向JSFIDLE提供您的代码。我尝试将其更新为这样，为什么按钮不能切换？。但是console.log不断更新问题是您没有在按钮HTMLIf中添加属性“disabled”（禁用）。如果您不介意，可以解释一下为什么需要jsonparse吗？这是因为我将isLoading视为字符串（isLoading:@）。所以只要字符串不为空，它就始终为真。解析字符串最简单的方法是JSON.parse（“true”）==true和JSON.parse（“false”）==false@这是一个没有JSON.parse的版本；我不得不将“观察”改为“观看”，并将“@”改为“=”@斯哈特
<button ng-model="button" ng-disabled="isLoading">Button</button>