如何使用angularJS restful服务从外部文件中使用json数据

I am developing an application. In that i am retrieving the json data from an

我正在开发一个应用程序。因为我正在从中检索json数据

external file using $http.get() method it worked fine. Now i am trying to use angular

外部文件使用$ http.get()方法,它工作正常。现在我正在尝试使用角度

restful services. it is working fine in filters, but when i use it in controller it is

宁静的服务。它在过滤器中工作正常,但当我在控制器中使用它时

displaying undefined.

//Service.js File
angular.module('calenderServices', ['ngResource']).
factory('Events', function($resource){
return $resource('/EventCalender/:File.json', {}, {
query: {method:'GET', params:{File:'events'}, isArray:true}
});
});


        //This is my app Module
angular.module('calender', ['eventFilters','highlight','event','calenderServices']).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
  when('', {templateUrl: 'template.html',   controller: MonthCtrl}).
  otherwise({redirectTo: '/invalid'});
}]);


     //This is my filter.js
angular.module('eventFilters', ['calenderServices']).filter('compare', function(Events) {
var events=Events.query();
alert(events[0].name); //it is displaying the name "Milestone1" });


     //This is my controller.
function MonthCtrl($scope, Events){
var events=Events.query();
    alert(events[0].name); //it is displaying undefined
    }

     //whenever i try to use the variable 'events' in controller, it is displaying undefined or null.  But in filter it is working fine.

1 个解决方案

#1

The following wont work because ngResource makes an asynchronous http request.

以下不会起作用,因为ngResource发出异步http请求。

var events=Events.query();
alert(events[0].name); // <--- here events is an empty array

Usually all you need to do is the following and your data will be available to render in your view

通常您需要做的就是以下内容,您的数据可以在视图中呈现

$scope.events = Events.query()

It looks like a synchronous operation, but it isn't. This is angular's zen at work. You can learn the details from the docs.

它看起来像一个同步操作,但事实并非如此。这是角度的禅在工作。您可以从文档中了解详细信息。

To further process the data, you could also pass pass a success callback to the get method

要进一步处理数据,您还可以将成功回调传递给get方法

Events.query(function(events){
    // here you have access to the first event's name
    console.log(events[0].name);
});

here's a working example: http://plnkr.co/edit/NDZ2JWjMUoUvtzEuRUho?p=preview

这是一个有效的例子:http://plnkr.co/edit/NDZ2JWjMUoUvtzEuRUho?p = preview

#1