angleJSの快適なサービスを使用して外部ファイルからjsonデータを使用する方法

Question

私はアプリケーションを開発中です。その中で、$ http.get（）メソッドを使用して外部ファイルから

のjsonデータを取得しています。今私は角を使用しようとしています

安らかなサービス。フィルターでうまくいきますが、コントローラーで使用すると、

と表示されます。

//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. 

Answer 1

次文句を言わない仕事ngResourceは非同期のHTTP要求を行うため。

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

通常あなたがする必要があるすべて以下であり、あなたのデータはあなたのビューでレンダリングに利用できるようになります

$scope.events = Events.query() 

これは、同期動作のように見えますが、そうではありません。これは職場の角度の禅です。 details from the docsを学ぶことができます。さらに、データを処理するために

、あなたもget方法

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

に成功コールバックを渡す渡すことができ、ここで働い例です：http://plnkr.co/edit/NDZ2JWjMUoUvtzEuRUho?p=preview