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

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，这意味着数据会异步。根据我的理解，使用 angular.copy 会触发一个 digest 循环，因此会检测到更改，但这根本不是一个好习惯。更喜欢我在上面代码中显示的 promise 处理

更新:

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