javascript - 表单未使用 Angular 清除 $.ajax 成功函数中的值

Question

我有一个表单，我正在使用 angualr.js。我将输入值绑定(bind)到 Angular 变量。提交表单后，在 $.ajax 的成功函数中，我为这些变量分配了空值，但我在表单中看到相同的值而不是空字符串。 下面是我的表单代码，

 <form name="addForm"  ng-submit="outClear()">
      <table>
       <tr>
          <td> <label>Title</label></td>
          <td> <input type="text" id="idTitle" ng-model="Title"/> </td>
        </tr>
        <tr>
           <td> <label>Description</label></td>
           <td> <textarea id="idDescription" name="desc" ng-model="Description" ></textarea> </td>
        </tr>
        <td><input type="submit" class="btn btn-default" value="Add" />  </td>
         <td></td>
         </tr>
        </table>
</form>

下面是我的java脚本代码，

var MyApp = angular.module("MyApp", []);
  MyApp.controller("TicketCntrl", function ($scope) {
 $scope.outClear = function () {
    var Title = $scope.Title;
    var Description = $scope.Description;

    var Ticket = {
        "Title": String(Title),
        "Description": String(Description),
    };

    $.ajax({
        type: "POST",
        url: "/Home/Add",
        data: Ticket,
        success: function (data, status) {
        alert('In success');
            $scope.clear();
        },
        error: function (status, error) {
        }
    });


};
$scope.clear = function () {
    $scope.Title = '';
    $scope.Description = '';
    alert('In clear');
  }
 }

它将成功运行并显示“成功”消息，并转到clear()并将“”值分配给$scope.Title和$scope.Description，但在文本框和文本区域中我看到了相同的值我已经进去了。

我又尝试了一件事，我在提交后直接调用clear()，而不是outClear()。然后它就完美工作了(所有表单值都变空)。

请让我知道我哪里做错了。

Answer 1

不要将 Angular 与 jQuery 混合来操作作用域变量，它会扰乱 Angular 的摘要循环。如果您从 jQuery 更新 scope 变量，它不会运行摘要循环。

在 Ajax 中的方法 clear() 成功修复后，您需要通过在 $scope 上调用 $apply() 来运行摘要循环它很快就会出现，但理想情况下我不喜欢采用这种方法。

请使用 $http 而不是 $.ajax。