Question

我是角色的新手，并尝试将其集成到我的应用程序中。在我的第一个版本中，我使用简单的$http.get到.JSON文件，这是成功的。

$http.get最初是在我的控制器中，我试图通过创建服务来模块化它。

调用我的新服务并显示到控制台时，我可以看到JSON文件中的数据，但是，当我在HTML中显示时，它是空白的。

我的控制器：

app.controller("CountriesController", function($scope, $http, countriesService) {

$scope.countries = [];

   countriesService.getCountryData(function(data) {

        $scope.countries = data.countries ;

        console.log(data.countries);            
    });

});

我的服务：

define([ 'app'], function(app) {
'use strict';

  app.factory('countriesService', function() {
      return {
          getCountryData: function(done) {
            $.get('/resources/data/countries-report.json', done);
          }
      }
  });

});

我的HTML：

<li ng-repeat="country in countries">
  {[{country.name}]}
</li>

在Firebug中查看时，我可以在我的控制台中看到以下内容：

[Object { name="Spain"}, Object { name="USA"}, Object { name="France"}]

任何想法都会受到赞赏。

更新************************************

忘了提及我通过以下方式改变了我从{{}}绑定到{[{}}}的方式：

var app = angular.module('app', []).config(function($interpolateProvider){
        $interpolateProvider.startSymbol('{[{').endSymbol('}]}');
    }
);

更新************************************

我原来的Controller（正在努力获取数据并显示到前端HTML）：

$http.get('/resources/data/countries-report.json').success(function(data) {
    $scope.countries = data.countries;
    console.log(data.countries);

 }).error(function(error) {
    alert('An error occured');
});

更新装饰控制器************************************ < / p>

require(['app', 'service/myService'], function(app) {
'use strict';

   app.controller("CountriesController", function($scope, $http, countiresService) {

Answer 1

您的服务正在使用我相信的jquery $。该服务应该在then

内调用回调

app.factory('countriesService', function($http) {
      return {
          getCountryData: function(done) {
            $http.get('/resources/data/countries-report.json')
               .success(function(data) { done(data);});
          }
      }
  });

Answer 2

我遇到了同样的问题。基本上，您正尝试使用尚未准备好的异步数据初始化您的应用程序。

我的解决方案是使用document.ready（）函数（jQuery）中的异步数据创建一个常量，以便在控制器中注入。只有在那里，您可以将该值设置为您的范围并打印它：

var myApp = angular.module('myApp', []);

$(document).ready(function() {

    // Initialising constant variable with async data 
    var initInjector = angular.injector(['ng']);
    var $http = initInjector.get('$http');

    $http.get('../request.php').then(
        function (response) {     

            menuApp.constant('COUNTRIES', response.data);     
            // Manually bootstrapping the App
            angular.element(document).ready(function() {
                angular.bootstrap(document, ['myApp']);
            });
        }
    );

});

myApp.controller('appController', ['$scope', 'COUNTRIES',
    function($scope, COUNTRIES) {

    if (COUNTRIES != undefined) {
        $scope.countries = COUNTRIES;   
    }
}]);

AngularJS .. http.get工作，当拆分成自己的服务模块时，它不再工作

2 个答案: