Question

我使用角度1，并尝试使用ng-click或ng-submit提交表单时设置变量。然后，该变量使用ng-if级联并从DOM中删除表单。但是，我遇到了Chrome错误消息＆＃34;表单提交已取消，因为表单未连接＆＃34;，表单未发布。

这是一个完整的MWE：

<html>
  <head>
    <title>Something</title>
  </head>
  <body>
    <div ng-app="myApp" ng-controller="myCtrl">
      <div ng-if="status.value=='ok'">
        <form action="url" method="post" target="_blank">
          <button type="submit" ng-click="status.value='newwindow'">Open in new window</button>
        </form>
      </div>
      <div>{{status}}</div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <script>
      var app = angular.module('myApp', []);
      var ctrl = app.controller('myCtrl', ['$scope', function($scope) {
        $scope.status = {'value':'ok'};
      }]);
    </script>
  </body>
</html>

每当我完全删除ng- *属性时，表单会正常提交，但变量不会更新。

有关如何将表单保留足够长的时间以便发布的任何建议吗？

Answer 1

此处代码中的问题是ng-if语句。单击该按钮后，status.value会立即更新，从而导致$digest周期。 $digest周期导致ng-if为false，从DOM中删除整个div（包括表单）。

一种可能的解决方法是使用ng-show而不是ng-if，只是隐藏元素，但不会将其从DOM中删除。

另一种可能性是将ng-click附加到处理所有表单提交逻辑的函数，甚至可能使用event.preventDefault()抑制默认提交。

Answer 2

<html>
  <head>
    <title>Something</title>
  </head>
  <body>
    <div ng-app="myApp" ng-controller="myCtrl">
      <div ng-if="status.value=='ok'">
        <form action="url" method="post" ng-submit="formSubmit()" target="_blank">
          <button type="submit" ng-click="status.value='newwindow'">Open in new window</button>
        </form>
      </div>
      <div>{{status}}</div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <script>
      var app = angular.module('myApp', []);
      var ctrl = app.controller('myCtrl', ['$scope', function($scope) {
        $scope.status = {'value':'ok'};
$scope.formSubmit=function(){
//here you can write you business logic here
};
      }]);
    </script>
  </body>
</html>

或者你也可以写：

 <form action="url" method="post"  target="_blank">
              <button type="submit" ng-click="postData()">Open in new window</button>
            </form>

在您的控制器中：

$scope.postData=function(){
//logic will be here:
}

ng-submit，删除表单，以及＆＃34;表单提交已取消，因为表单未连接＆＃34;

2 个答案: