Question

有没有办法用ng-disabled禁用整个表？

$scope.isDisabled = false;
$scope.disableClick = function() {
  $scope.isDisabled = true;
}

Answer 1

有一种方法可以执行此操作，因此您可以在表（或任何元素）上使用ng-disabled属性，并保留其中所有表单元素的所有标记：

<table ng-disabled="disabled">
  <tbody>
    <tr>
      <td><input type="text"></td>
      <td><button>A button</button></td>
      <td>
        <select>
          <option>An option</option>
          <option>Another option</option>
        </select>
      </td>
      <td>
        <textarea>Textarea</textarea>
      </td>
    </tr>
  </tbody>
</table>

您可以扩展Angular的ngDisabled指令，以在控制器的ng-disabled属性中公开值：

app.directive('ngDisabled', function() {
  return {
    controller: function($scope, $attrs) {
      var self = this;
      $scope.$watch($attrs.ngDisabled, function(isDisabled) {
        self.isDisabled = isDisabled;
      });      
    }
  };
});

然后，您可以从其中的任何isDisabled，input，select或button元素访问控制器的textarea属性，从而创建每个观察者：

function reactToParentNgDisabled(tagName) {
  app.directive(tagName, function() {
    return {
      restrict: 'E',
      require: '?^ngDisabled',
      link: function(scope, element, attrs, ngDisabledController) {
        if (!ngDisabledController) return;
        scope.$watch(function() {
          return ngDisabledController.isDisabled;
        }, function(isDisabled) {
          element.prop('disabled', isDisabled);
        });
      }
    };
  });   
}

['input', 'select', 'button', 'textarea'].forEach(reactToParentNgDisabled);

你可以see this working in this Plunker

我无法说出它的效率：<table>上的元素会有一个观察者，然后是表中每个表单元素的额外观察者。

我确实考虑过单个监视+范围事件，但我遇到了一个问题，因为具有ng-disabled属性的元素可能与父/兄弟元素共享其范围，因此它广播的任何范围事件都可能是发送到它之外的元素。

或者为了消除每个表单元素的观察者的需要，扩展的ngDisabled指令的控制器可以维护其中的表单元素的列表，并更改它们的所有{{1} }属性一次。

Answer 2

根据Angular的ng-disabled文档，它只能用于INPUT元素。见 - ng-disabled

因此在表格上使用此标记不会产生任何影响。如果要禁用表中的每个元素，可以对每个元素使用ng-disabled。

至于制作表格＆＃34;不可点击＆＃34;考虑为元素定义自定义CSS类，并使用ng-class在需要时动态分配类。

禁用文字选择的CSS：

.myClass {
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
}

见 -

禁用ng-disabled禁用表中的所有表单元素

2 个答案: