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

时间:2015-01-27 01:42:30

标签: angularjs angularjs-directive angularjs-scope angular-ui-router

我目前正在学习Angular。我有一个连接到径向进度气泡的控制器,我正在创建一个工厂,使用$ http从data.json中获取一些虚拟数据我将工厂注入我的控制器并将该数据设置为变量,以便我可以使用它在其他一些对象中。确切地说,我想从我的json文件中获取返回数组的第一个元素作为circle对象上的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)
    }

});

1 个答案:

答案 0 :(得分:0)

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