改变模式

ngHide on model change

本文关键字：模式 改变      更新时间：2023-09-26

我有如下的旋转控件

<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()来通知angular的变化，但如果没有JQuery的话会更好。

查看拦截器文档中的示例:https://docs.angularjs.org/api/ng/service/$http

尝试ng-show="ajaxrequest"代替ng-show="{{ajaxrequest}}"。ng-show已经接受一个表达式，所以不需要大括号。

相关文章：