1

我正在维护一段时间前编写的代码，我没有使用 AngularJS 的经验。我必须在触发 HTTP 请求时打开微调器，并在收到 HTTP 响应时关闭它。

微调器由 ang-if和$scope.authenticating变量控制。

目前，当页面加载时，微调器被打开（根据$scope.authenticating === false.

用户切换开关并正确触发 HTTP，$scope.authenticating设置为true并且微调器正确显示。

当 HTTP 响应返回时，控制台日志显示响应的内容，一切正常，然后$scope.authenticating设置为false，但是：微调器仍然存在并且不会消失。

任何帮助表示赞赏。

接下来，代码。

控制器：

  $scope.authenticating = false


  $scope.myfunction = async function (check, change, user) {
    if (someCheck(user)) {
      $scope.modified = true;
      ...
      $scope.authenticating = true
      let res = await AppUserResource.patch(..., ...).$promise;
      console.log('res: ' + JSON.stringify(res))
      $scope.authenticating = false
    }
  }

相关的 HTML 代码：

  <div style="margin-top:13px">
    <div ng-if="!authenticating">
      <label class="switch">
        <input id="switch" ng-change="bypassApps(disabledAppsCheckbox, true, user)" ng-model="disabledAppsCheckbox"
               type="checkbox">
        <div class="slider round">
          <div class="slider-text pull-left text-green-table">{{'ON' | translate}}</div>
          <div class="slider-text pull-right text-red-table">{{'OFF' | translate}}</div>
        </div>
      </label>
    </div>
    <div ng-if="authenticating">
      <i class="fa fa-spinner fa-spin"style="font-size:270px;margin-bottom:5%; margin-top:5%;"></i>
    </div>
  </div>
4

1 回答 1

2

当使用 async/await 模式时，它在 angularJS 摘要循环之外。因此，您必须致电

$scope.$apply()

https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$apply

于 2020-07-31T08:57:32.653 回答