angular ng-if 不断刷新页面

Question

我有以下 div 设置，我在加载 div 和角度视图之间切换。 globalCtx.viewportLoading == true时只显示加载div，globalCtx.viewportLoading == false时只显示ng-view：

<div id="viewContainer">
    <div class="loader" ng-if="globalCtx.viewportLoading"></div>
    <div ng-view ng-if="!globalCtx.viewportLoading"></div>
</div>

变量 globalCtx 在 Angular 服务中定义如下：

app.factory("globalCtx", function () {
    var service = {
        viewportLoading: false
    };
    return service;
});

在每条路线上，我都有不同的视图和不同的角度控制器。对于这些视图中的每一个，我都会显示加载 div，直到页面加载如下：

生成请求

var req = {
    method: 'POST',
    url: 'api/v1/work/do-something',
    data: request,
    headers: {
        'Content-Type': "application/json; charset=utf-8"
    }
}

将加载设置为 True

globalCtx.viewportLoading = true

发出请求，并在回复时将 viewportLoading 设置为 false

$http(req).then(function (resp) {

    // ... do something ...

    globalCtx.viewportLoading = false
},
function (resp) {
    alert('Error fetching data from server!');
});

这适用于我运行的第一页。比如说主页。但是在那之后我路由到的任何页面，它都会不断刷新该页面。说，我去主页。它发出一个数据请求。然后我路由到 page1，我注意到 page1 的角度控制器不断刷新并且被一遍又一遍地创建。为什么是这样？和ng-if有关系吗？

Answer 1

请使用此代码加载您的视图

 globalCtx.viewportLoading = false;
 $scope.$on('$viewContentLoaded', function(){
  globalCtx.viewportLoading = true;
 });