Как показать сервисные данные сразу после их получения с помощью $ http без использования angular.copy?

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