AngularJS：控制器范围不会与promise同步

Question

我已经选择了一个项目，我正在尝试将一些数据从服务返回到我的控制器。 我已经在这里待了大约12个小时，并尝试了不同的方法。 它们通常都会产生同样的“缺失数据”。

我试过了

使用$ resource而不是$ http
将$http.get放在控制器内，而不使用promises
服务作为实际服务（而不是工厂）没有返回
建立工厂的一系列不同方式以各种格式返回数据
使用setTimeout和$ apply

我觉得我现在所拥有的是一个简单的，因为我可以得到它，而我所读到的一切都说这应该有效

angularjs的负载数据从服务

角控制器斜面-GET-数据从服务

angularjs -承诺-不烧时，返回-从一种服务

angularjs -承诺-不解决，适当

angularjs-承诺

这些链接就是从今天开始的。

我认为可能存在$ scope问题，因为在过去我看到$ scopes在使用多个控制器时无法获取数据，但是该站点只是在index.html中将控制器声明为<body ng-app="myApp" ng-controller="BodyCtrl">设置。 主app.js使用状态（我认为来自ui-router）就像这样......

.state('app.view', {
    url: '/view',
    templateUrl: 'views/view.tpl.html',
    controller: 'MyCtrl'
   })

将控制器连接到不同的页面。 此外，该网站还有一些其他控制器从服务中获取数据，我首先将其作为模板查看，然而，数据和返回比我想要的更复杂。 但最重要的是，控制器正在访问服务提供的数据。 他们都使用$ resource，这就是我从这个问题开始的方式。 我坚持使用$ http因为它应该可以工作，而且我希望在我进入“更高级别”的东西之前使用它。 此外，我只需要从端点获取，所以觉得$ resource太过分了。

服务

.factory('MyService', ['$http', '$q', '$rootScope', function ($http, $q, $rootScope) {
    var defer = $q.defer();
    var factory = {};
    factory.all = function () {
        $http({method: 'GET', url: 'http://URLtoJSONEndpoint'}).
            success(function (data, status, headers, config) {
                console.log('data success', data);
                defer.resolve(data);
            }).
            error(function (data, status, headers, config) {
                console.log('data error');
                defer.reject(data);
            });

        return defer.promise;
    };
    return factory;
}]);

调节器

.controller('MyCtrl', ['$scope', '$state', '$stateParams', '$rootScope', 'MyService', '$q', function ($scope, $state, $stateParams, $rootScope, MyService, $q) { 
...
...
$scope.data = null;
$scope.object = MyService;
$scope.promise = MyService.all();

MyService.all().then(function (data) {
    $scope.data = data;
    console.log("data in promise", $scope.data);
})
console.log("data", $scope.data);
console.log("object", $scope.object);
console.log("promise", $scope.promise);

$http({method: 'GET', url: 'http://URL'}).
        success(function (data, status, headers, config) {
            $scope.data = data;
            console.log('data success in ctrl', data);
        }).
        error(function (data, status, headers, config) {
            console.log('data error');
        });

    console.log("data after ctrl", $scope.data);


    angular.forEach($scope.data, function (item) {
        // stuff that I need $scope.data for
    }

控制台日志

所以这是我的控制台日志，我可以得到这么多 ，而不是实际的数据！ 这就是我需要的。 我甚至疯狂并扩展了我的.then(function (data) {以捕获控制器中需要$scope.data所有函数。这是一个火车残骸。

***data null***
object Object {all: function}
promise Object {then: function, catch: function, finally: function}
***data success after ctrl null***
data success in ctrl Array[143]
data success Array[143]
data in promise Array[143]
data success Array[143]

据我所知，这应该有效，但我不确定问题还能在哪里出现！ 也许我不明白承诺如何运作或解决。 我之前使用过Angular和另一个项目，但是我在那里开始并理解它是如何组合在一起的。 这个项目结构不同，感觉更加混乱。 我想简化它，但我似乎甚至无法获得一些简单的数据返回！

感谢您提供的任何帮助/反馈，以确定为什么这不起作用，谢谢！

编辑：所以问题是，为什么console.log("data", $scope.data)在承诺之前返回null /？

在控制器中稍微向下我有这个

angular.forEach($scope.data, function (item) {
// stuff
}

它似乎无法访问数据。

EDIT2：我添加了我在控制器中使用的$http.get ，以及它的控制台日志和实际forEach我需要$scope.data for

EDIT3：

更新的服务

.service('MyService', ['$http', function ($http) {
    function all() {
        return $http({
            url: 'http://URL',
            method: 'GET'
        });
    }

    return {
        all: all
    }
}]);

更新控制器

MyService.all().success(function (data) {
        $scope.data = data;

        angular.forEach($scope.data, function (item) {

            // Turn date value into timestamp, which is needed by NVD3 for mapping dates
            var visitDate = new Date(item.testDate).getTime();

            switch (item.Class) {
                case "TEST":
                    testData.push(
                        [
                            visitDate,
                            item.Total
                        ]
                    );

            }

        });

        console.log("test Data in success", testData);
    });


$scope.testData = [
        {
            "key": "Test",
            "values": testData
        }
    ];

因此需要在视图（nvd3图表）中使用$scope.testData ，并且它不会获取数据。

解

MyService.all().success(function (data) {
        $scope.data = data;

        angular.forEach($scope.data, function (item) {

            // Turn date value into timestamp, which is needed by NVD3 for mapping dates
            var visitDate = new Date(item.testDate).getTime();

            switch (item.Class) {
                case "TEST":
                    testData.push(
                        [
                            visitDate,
                            item.Total
                        ]
                    );
            }

        });

        console.log("test Data in success", testData);

        $scope.testData = [
        {
            "key": "Test",
            "values": testData
        }
    ];
    });

Answer 1

这可能是您的服务外观的一个非常简单的示例：

app.service('MyService', ['$http', function ($http) {
  function all() {
    return $http({
      url: 'data.json',
      method: 'GET'
    });
  }

  return {
    all: all
  }
}]);

在控制器中，您可以这样使用它：

app.controller('AppCtrl', ['$scope', 'MyService', function ($scope, MyService) {
  $scope.data = null;

  MyService.all().success(function (data) {
    $scope.data = data;

    // init further handling of `.data` here.
  });
}]);

演示： http ： //plnkr.co/edit/l8pF8Uaa312A8kPtaCNM?p=preview

要回答为什么控制台将data null记录为data null ：这只是因为日志在异步调用完成之前发生。

Answer 2

我面临同样的问题。 我解决这个问题，通过使用$rootScope的承诺，而不是内部$scope.So $rootScope.data将在缴费console.log

AngularJS：控制器范围不会与promise同步

问题描述

2 个解决方案

解决方案1
5 已采纳 2014-05-07 14:58:36

解决方案2
0 2015-12-03 09:38:36

AngularJS：控制器范围不会与promise同步

问题描述

2 个解决方案

解决方案1 5 已采纳 2014-05-07 14:58:36

解决方案2 0 2015-12-03 09:38:36

解决方案1
5 已采纳 2014-05-07 14:58:36

解决方案2
0 2015-12-03 09:38:36