从 Angular 工厂获取数据并将数据共享给控制器

Question

我目前正忙于学习 Angular。我有一个连接到径向进度气泡的控制器，我正在创建一个工厂，它使用 $http 从 data.json 获取一些虚拟数据我将工厂注入我的控制器并将该数据设置为变量，以便我可以使用它在其他一些物体内。确切地说，我想从我的 json 文件中获取返回数组的第一个元素作为圆对象上的 dashOffset 属性。我控制器中的当前 console.log 打印出 Undefined 但我工厂中的 console.log 打印出正确的数组。

var app = angular.module('app',['ui.router'])
.factory('Data', function($http){
    return {
        getData : function(callback){
            $http.get('data.json').success(function(res){
                console.log(res)
            });
        }
    }



})
.controller('radial', function($scope, Data){
    $scope.ryan = Data.getData();

    console.log($scope.ryan);


    $scope.circle = {
        size : 110,
        stroke : '#2C3E50',
        strokeWidth : 10,
        radius : 48,
        dashArray : Math.PI * 2 * 48,
        dashOffset : (Math.PI * 2 * 48)
    }
    $scope.circleBG = {
        size : 110,
        stroke : '#2C3E50',
        strokeWidth : 10,
        radius : 48,
        dashArray : Math.PI * 2 * 48,
        dashOffset : (Math.PI * 2 * 48)
    }

});

Answer 1

2 件事 1->您并没有真正在 getData 方法中返回任何内容 2-> getData 是一个异步操作，所以到函数返回时，还没有数据可供查看

有两种方法可以实现你想要的

1->callbacks
2-> promises

使用回调你可以做类似的事情 在你的控制器中

假设你返回 $http.get 你可以做

//using success callback
Data.getData()
.success(function(data){
     $scope.ryan=data;
     console.log($scope.ryan)
});

//using promises

Data.getData()
.then(function(response){
    return response.data
})
.then(function(ryan){
   $scope.ryan=ryan;
   console.log(ryan)
})

有关此评论的更多信息

https://docs.angularjs.org/api/ng/service/$http