对一组元素应用angular指令

Question

我想在某个条件为真时禁用带有许多制表符的大型表单中的所有表单元素。我可以使用像<input ng-disabled="myCondition()">这样的东西，但我需要在相当多的地方添加它，这似乎是糟糕的代码复制。经过一番考虑，我决定在我的控制器中使用以下内容。(我正在使用coffeescript btw)

$scope.$watch 'myCondition()', ->
  if $scope.myCondition()
    $('.my-form').find('input, select, textarea').attr('disabled', true)
  else
    $('.my-form').find('input, select, textarea').attr('disabled', false)

这是有效的，但它似乎很脆弱。例如，如果我有其他原因需要有条件地禁用表单元素，那么这可能会表现得很奇怪。正确的做法是什么?这和$compile有关吗?

Answer 1

如果您想要的是禁用一组输入(标题在这种情况下有点误导)，您可以尝试<fieldset>:

<fieldset ng-disabled="common.condition">
    <input ng-model="input1" ... />
    <input ng-model="input2" ... />
    ...
</fieldset>

Answer 2

你也可以为此编写一个自定义指令。例如:

app.directive('disableElements', function() {
    return {
        link: function(scope, element, attrs) {
            var elements = angular.element(element[0].querySelectorAll('input, textarea, select'));
            scope.$watch(attrs.disableElements, function(newVal) {
                elements.prop('disabled', !!newVal);
            });
        }
    };
});

并像这样使用:

<form disable-elements="condition">
    ...
</form>

的好处是你可以在指令中选择你想要禁用的元素，例如某个类。然而，如果你想禁用表单中的所有元素，你应该使用Nikos提出的fieldset方法。

演示:http://plnkr.co/edit/pQkdQvABAytudRhC8bw2?p=preview