AngularJS Tải dữ liệu từ dịch vụ

Question

Tôi gặp sự cố khi nhận dữ liệu từ dịch vụ được đưa vào chế độ xem của tôi. Tôi đã một dịch vụ được định nghĩa như vậy

app.factory('nukeService', function($rootScope, $http) { 
    var nukeService = {}; 

    nukeService.nuke = {}; 

    //Gets the list of nuclear weapons 
    nukeService.getNukes = function() { 
     $http.get('nukes/nukes.json') 
      .success(function(data) { 
       nukeService.nukes = data; 
      }); 

     return nukeService.nukes; 
    }; 

    return nukeService; 
}); 

và điều khiển của tôi

function NavigationCtrl($scope, $http, nukeService){ 



    /*$http.get('nukes/nukes.json').success(function(data) { 
     $scope.nukes = data; 
    });*/ 

    $scope.nukes = nukeService.getNukes(); 

} 

Nếu tôi sử dụng $ http.get từ bộ điều khiển dữ liệu populates tốt, tuy nhiên, nếu tôi cố gắng gọi dữ liệu từ dịch vụ, tôi không nhận được gì. Tôi hiểu rằng truy vấn không đồng bộ nhưng tôi gặp khó khăn trong việc hiểu cách điền biến $ scope khi dữ liệu được trả về. Tôi có thể sử dụng $ rootscope để phát sóng một sự kiện và lắng nghe nó trong bộ điều khiển nhưng điều này dường như không đúng cách để thực hiện điều này. Tôi thực sự sẽ đánh giá cao bất kỳ lời khuyên nào về cách làm điều này một cách chính xác.

Answer 1

Tôi nghĩ rằng điều này sẽ giải quyết vấn đề của bạn

app.factory('nukeService', function($rootScope, $http) { 
    var nukeService = {}; 

    nukeService.data = {}; 

    //Gets the list of nuclear weapons 
    nukeService.getNukes = function() { 
     $http.get('nukes/nukes.json') 
      .success(function(data) { 
       nukeService.data.nukes = data; 
      }); 

     return nukeService.data; 
    }; 

    return nukeService; 
}); 

function NavigationCtrl($scope, $http, nukeService){ 

    $scope.data = nukeService.getNukes(); 

    //then refer to nukes list as `data.nukes` 

} 

Đây là một vấn đề với tham chiếu đối tượng.

khi bạn gọi nukeService.getNukes() bạn đang tham chiếu đến đối tượng a thì biến của bạn $scope.nukes là vị trí bộ nhớ.

Sau khi cuộc gọi máy chủ từ xa khi bạn thiết nukeService.nukes = data; bạn không thay đổi đối tượng a thay vào đó bạn đang thay đổi nukeService.nukes từ tham khảo đối tượng a phản đối b. Nhưng $scope.nukes của bạn không biết về việc phân bổ lại này và nó vẫn trỏ đến đối tượng a.

Giải pháp của tôi trong trường hợp này là phải vượt qua một đối tượng a với tài sản data và sau đó chỉ thay đổi thuộc tính dữ liệu thay vì thay đổi tham chiếu đến a

Answer 2

này nên thực hiện như sau. Như đã đề cập bởi bình luận của NickWiggill, undefined sẽ được gán cho nukeService.data nếu chúng ta không trả về lời hứa.

app.factory('nukeService', function($rootScope, $http) { 
    var nukeService = {}; 
    //Gets the list of nuclear weapons 
    nukeService.getNukes = function() { 
     return $http.get('nukes/nukes.json'); 
    }; 

    return nukeService; 
}); 


    function NavigationCtrl($scope, $http, nukeService){ 
    nukeService.getNukes().then(function(response){ 

     $scope.data = response.data; 
    }); 

    } 

Answer 3

Điều tôi làm là hiển thị dữ liệu trực tiếp từ dịch vụ và có phương pháp khởi tạo dữ liệu này. Điều gì là sai với điều này?

dịch vụ:

app.factory('nukeService', function($scope, $http) { 
    var data = {}; 
    data.nukes = []; 

    //Gets the list of nuclear weapons 
    var getNukes = function() { 
     $http.get('nukes/nukes.json').success(function(data) { 
       data.nukes = data; 
     }); 
    }; 

    // Fill the list with actual nukes, async why not. 
    getNukes(); 

    return { 
     data : data 
     // expose more functions or data if you want 
    }; 
}); 

Bộ điều khiển:

function NavigationCtrl($scope, nukeService){ 
    $scope.data = nukeService.data; 
    //then refer to nukes list as `$scope.data.nukes` 
}