Question

我在控制器中有一个条件。如果条件返回true，那么我必须禁用所有链接和ng-click s

我们如何做： -

Controller : $scope.disableActions = true;

在HTML中

<button type="button" ng-click="ignoreAndRedisplay()" ng-disabled="disableActions">OpenClick</button>

通过这样做，我必须在任何地方写ng-disabled="disableActions"，这将是多余的，我们如何才能为n个按钮和链接改进这一点？

Answer 1

我建议你为这些案例做些什么，只需将所有按钮放在单fieldset内，然后将ng-disabled应用于fieldset，其中的控件就在那里如果disabled表达式评估为ng-disabled

，字段集将自动获得true

<fieldset ng-disabled="disableActions">
   <button type="button" ng-click="ignoreAndRedisplay()">OpenClick</button>
   <button type="button" >Some Other button</button>
   <button type="button" >One more button</button>
   ...
</fieldset>

Demo Here

在评论中，您要求OP禁用anchor标记。基本上你不能禁用anchor标签。你可以尝试下面的黑客来使它工作。

fieldset[disabled] a { 
   pointer-events: none;
}

Plunker

Answer 2

ng-disabled这是正确的方法。它是否具有还原性。

如果你有n个链接和按钮，请使用这种不良做法使用

添加此禁用的属性

$watch('disableAction',function(value){
   if(value==true){ 
    //use a selector here to select all your a and button elts and add a 
    //disabled="disabled" attribute.
   }
   else {
   // remove that disabled attribute
   }
});

Answer 3

你可以尝试创建自己的指令，但ng-disabled是正确的方法，正如JinsPeter所说

Answer 4

是的，你必须在编写ng-disabled时随处写buttons所以这是正确的方法。这是多余的。

Answer 5

ng-disabled是最好的。 $scope.disableActions可以使用多个地方并影响所有地方。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
<body ng-app ng-init="disableActions = false">
<button ng-disabled="!disableActions">OpenClick</button>
<button ng-disabled="!disableActions">Second Click</button>
<button ng-disabled="!disableActions">Third Click</button>
<button type="button" ng-click="disableActions = !disableActions">Enable/Disable</button>
</body>

Answer 6

在所有链接上放置ng-disabled会导致性能问题，但这是正确的方法。但是，如果您不想要一些UI更改，您可以在控制器中正确执行。

$scope.ignoreAndRedisplay = function () {
    if ($scope.disableActions) return;
    // your code here
}

Angular Js：有条件地如何禁用所有按钮和链接？

6 个答案: