Jquery AngularJS。。http.get working，当拆分为自己的服务模块时，它将不再工作

我是angular的新手，正在尝试将其集成到我的应用程序中。在我的第一个版本中，我对.JSON文件使用了一个简单的

$http.get

，这是成功的

$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);
          }
      }
  });

});

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

$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');
});

我的服务：

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);
          }
      }
  });

});

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

$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');
});

我的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);
          }
      }
  });

});

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

$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');
});

任何想法都将不胜感激

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

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

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

忘了提及我已通过以下方式将绑定方式从{{}更改为{[{}]}：

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

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

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

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

我的原始控制器（用于获取数据并显示到前端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);
          }
      }
  });

});

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

$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');
});

更新装饰控制器*********************************************************************

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

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

---

您的服务正在使用jquery

$

我相信。服务应该是，在

内部调用回调，然后

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

---

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

我的解决方案是使用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;   
    }
}]);

---

这不是问题所在，您正在将jquery和angularjs混合在一起，以实现完全可以用angular完成的功能。@Chanermani-我可能说得太快了，我得到了错误：错误：未知提供程序：countriesServiceProvider这是依赖项注入错误。确保存在按名称定义的服务

countries服务

。为什么我会在这里看到

countries服务

重复了两次

Service

。@Chanermani-似乎在我的控制器文件中，我需要用require（['app'，'Service/myService'，function（app））装饰它{……所以本质上，我需要myService..这是正确的吗？您正在使用一些我不太熟悉的按需脚本加载库。但是有一个输入错误，

CountireService

done是您的回调方法。

数据

是服务器返回的。本质上调用回调方法

done带有参数数据。