javascript - ngHide on model change

我有以下微调器，

<div id="spinningSquaresG" ng-model="ajaxrequest"  ng-show="{{ajaxrequest}}">
<div id="spinningSquaresG_1" class="spinningSquaresG">
</div>
<div id="spinningSquaresG_2" class="spinningSquaresG">
</div>
<div id="spinningSquaresG_3" class="spinningSquaresG">
</div>
<div id="spinningSquaresG_4" class="spinningSquaresG">
</div>
<div id="spinningSquaresG_5" class="spinningSquaresG">
</div>
<div id="spinningSquaresG_6" class="spinningSquaresG">
</div>
<div id="spinningSquaresG_7" class="spinningSquaresG">
</div>
<div id="spinningSquaresG_8" class="spinningSquaresG">
</div>
</div>
</div>

在我的控制器中，我设置了$scope.ajaxrequest = false;，以便微调器正确隐藏（如果我将其设置为ajaxrequest = true，它将出现，因此我认为对此没有问题）。在控制器内部，我有一个发出ajax请求的函数，我想在请求开始时显示微调框，并在请求完成时隐藏它。所以我有：

$( document ).ajaxStart(function() {
              $scope.ajaxrequest = true;
              console.log($scope.ajaxrequest);
        });

$( document ).ajaxStop(function() {
              $scope.ajaxrequest = false;
              console.log($scope.ajaxrequest);
        });

从控制台可以看到，ajaxrequest值在请求之前和之后都正确更改。问题是微调器没有出现。我错过了什么？

最佳答案

您正在使用JQuery触发对ajaxrequest的更改，因此angular不知道任何更改。您可以在更改ajaxrequest后通知scope.$apply()，以通知角度更改，但最好不要使用JQuery。

查看有关拦截器的文档作为示例：https://docs.angularjs.org/api/ng/service/$http