Question

我有一项服务，该服务应为我保存从JSON文件加载的特定数据。我希望数据在收到后立即显示在页面上。我创建了一个$ scope变量，使其等于服务中的数据，该数据没有立即显示在页面上。

我仅在使用angular.copy(response.data, this.animals)时达到了目标，但是我不明白为什么我在使用this.animals = response.data时为何不起作用。我想知道为什么会这样，有什么区别。

module.service("animalService", function($http) {
    this.animals=[];
    $http.get('animals.json').then(function(response) {
        //this.animals = response.data ----> not working
        angular.copy(response.data, this.animals)
    });
});

module.controller("animalController", function($scope, animalService) {
    //$scope.animals is what I use to create a table in html
    $scope.animals = animalService.aniamsl;
});

Answer 1

您的操作不正确，请尝试：

module.service("animalService", function($http) {
     return $http.get('animals.json')
});

module.controller("animalController", function($scope, animalService) {
    animalService.then(function(res){
       $scope.animals = res.data
    });
});

任何http响应都返回promise，这意味着数据将asynchronously出现。根据我的理解，使用angular.copy会触发一个digest周期，因此可以检测到更改，但这并不是一个好习惯。如我在上面的代码中所示，更喜欢promise处理

更新：

由于变量填充为promise，并且将由其他controller使用，因此我建议使用$rootScope.emit和$rootScope.on之类的事件，以便controllers完成后会通知$http

如何在不使用angular.copy的情况下通过$ http接收服务数据时立即显示？

1 个答案:

更新：