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

Question

我目前正在忙于学习Angular。我有一个连接到径向进度气泡的控制器，我正在创建一个使用 $http 从 data.json 获取一些虚拟数据的工厂，我将工厂注入我的控制器并将该数据设置为一个变量，这样我就可以在其他一些对象中使用它。确切地说，我想从我的 json 文件中获取返回数组的第一个元素作为圆对象上的 dashOffset 属性。我控制器中的当前 console.log 打印未定义，但我工厂中的 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 方法中 returning 任何东西 2-> getData 是一个异步操作，所以到函数 returns 还没有数据要查看时

有两种方法可以实现您想要的效果

1->callbacks
2-> promises

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

假设你return $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

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

Getting data from an Angular factory and sharing data to a controller

angularjs

angularjs-directive

angularjs-scope

angular-ui-router