Question

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

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

变量globalCtx在角度服务中定义，如下所示：

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;
 });

角度ng-if保持刷新页面

1 个答案: