Question

我遇到一个问题，其中一个页面有两个组件，但只有一个组件完全呈现。

问题似乎与$ http有关。我有一个角度项目，我需要构建一个基于RESTful API的页面。页面是这样的，我可以期望对相同数据的多个请求。目前，请求集的行为不正确。

为了参数（也因为它是一个用例），下面的页面会发出两次相同的请求。

game.html：

<html ng-app="prvdApp">
<head>
<meta charset="utf-8">
<base href="/">
<title>Providence</title>
<script src="/js/angular-1.6.2.js"></script>
<script src="/data-access/data-access.service.js"></script>
<script src="/score-info/score-info.component.js"></script>
<script src="/js/game.js"></script>
</head>
<body>
    <div ng-controller="gameController">
        <score-info game-id="8000"></score-info>
        <score-info game-id="8000"></score-info>
    </div>
</body>

game.js：

angular.module('prvdApp', [
    'scoreInfo',
    'drivesInfo' ]);
angular.
module('prvdApp').
controller('gameController', function() {
});

score-info.component.js：

angular.module('scoreInfo', [
    'dataAccess'
]);
angular.
module('scoreInfo').
component('scoreInfo', {
    templateUrl : '/score-info/score-info.template.html',
    controller : function ScoreInfoController(dataAccess) {
        self = this;
        self.$onInit = function() {
            dataAccess.game(self.gameId).then(function(game) {
                self.game = game;
            });
        }
    },
    bindings : {
        gameId : '<'
    }
});

score-info.template.html：

<div>
Data available: {{ $ctrl.game != undefined }}
</div>

data-access.component.js：

angular.module('dataAccess', []);
angular.
module('dataAccess').
service('dataAccess',
    function DataAccessService($http, $q) {
        self = this;
        self.game = function(game_id) {
            var url = '/api/game/' + game_id;
            return $http.get(url, { cache: true}).then(function(response) {
                return response.data;
            });
        }
    });

行为如下：

页面呈现内容：

可用数据：false

可用数据：false

在$http - 请求完成几百毫秒后，页面将更新为以下状态，其中只更新后一个组件。

可用数据：false

可用数据：true

应该注意的是，即使两个组件具有不同类型和不同的控制器等，行为也是相同的。

Angular $ http无法返回一致的缓存

0 个答案: