我有如下的旋转控件
<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
已经接受一个表达式,所以不需要大括号。