使用Angularjs blockUI时未定义表单对象

Question

我正在使用 Angularjs，版本 1.5，并且我在我的 html 中指定了一个表单，如下所示：

<div class="row" ng-show="showForm">
<form class="form-horizontal" name="myForm" novalidate role="form">
</form>
</div>

在相应的控制器中，我有一个重置表单并调用原始函数的函数：

$scope.myForm.$setPristine();

到目前为止，一切正常。

然后我尝试使用 blockUI (https://github.com/McNull/angular-block-ui) 通过将上面的 div 更改为：

<div class="row" ng-show="showForm" block-ui="myBlock">

所以唯一的补充是：block-ui="myBlock"

但是，当控制器代码运行时，我得到：

TypeError: 无法读取未定义的属性“$setPristine”

调试时我发现表单对象不存在！删除 block-ui="myBlock" 后，一切正常。

有什么想法吗？

提前致谢

Answer 1

尝试以下方法：

function MyCtrl($scope, $timeout, blockUI) {

  $scope.form = {};

  $scope.submit = function() {
    var myBlockUI = blockUI.instances.get('myForm');

    $scope.form.myForm.$setPristine();
    myBlockUI.start();

    $timeout(function() {
      // Stop the block after some async operation.
      myBlockUI.stop();
    }, 3000);
  };
}

并查看：

<form name="form.myForm" novalidate ng-submit="submit()" block-ui="myForm">
  <input type="text">
    <button>
       Submit
    </button>
  </form>

我在$scope 上使用undefined 表单时遇到了同样的麻烦，但是在 SO 上使用附加对象 form 时发现了这些技巧。戳here。