ネストされたコールバックスコープとrootScope AngularJS

Question

DBからレコードを読み込んでカレンダーに出力する次のコントローラをAngularで用意しました。問題は、イベント配列が空の状態に戻ってしまうことです。代替として$ rootScope.eventsを使用しようとしましたが、 "concatは未定義の関数ではありません"というエラーが返されます。私は間違って何をしていますか？ネストされたスコープのトリックがありますか？

また、innerActivity変数が内部コールバックでも定義されていないこともわかりました。私はこれが私が欠けている一般的な知識の一部だと考えています。いくつかの事はここで起こっ

app.controller('Calendar', ['$scope','$rootScope','$resource','moment', function($scope, $rootScope, $resource ,moment) { 

    var Activities = $resource('/api/activities'); 
     Activities.query(function(activities){ 
      $rootScope.activities = activities; 
      //console.log($rootScope.activities); 
     }); 

    //console.log($rootScope.activities); 

    var vm = this; 
    var events = []; 

    //define the calendar on rootScope, so it has access to the Events data from the other controllers 
    $rootScope.calendar = new moment(); 

    angular.forEach($rootScope.activities, function(eachActivity){ 
     //console.log(eachActivity.events); 
     if (eachActivity.events.length > 0){ 
      angular.forEach(eachActivity.events, function(eachEvent, eachActivity){ 
      console.log(eachEvent);  
      var entry = { 
        title: eachActivity.title, 
        type: "warning", 
        startsAt: eachEvent.startDate, 
        endsAt: eachEvent.endDate, 
        incrementBadgeTotal: true 
       } 

      events.concat(entry); 

      }); 
     } 
    }); 

    vm.events = events; 
    console.log(vm.events); 

    vm.calendarView = 'month'; 

    vm.viewDate = moment().startOf('month').toDate(); 
    vm.isCellOpen = true; 

}]); 

Answer 1

eachActivityが既に外側のループで定義されているよう

angular.forEach(eachActivity.events, function(eachEvent, eachActivity) 

angular.forEach(eachActivity.events, function(eachEvent) 

への第2引数は必要ありません変更する、あなたの当面の問題を解決します。

はまた、代わりに$ rootScopeにカレンダーを定義するのではなく、カレンダーの工場を作成し、カレンダーデータにアクセスする必要がコントローラにそれを注入し、さらにevents.push(entry);

にevents.concat(entry);を変更します。これがより良い理由はいくつかありますが、最も単純なのは、$スコープはコントローラ間でデータを共有するためのものではないということです。主にビューとコントローラ間でデータをバインドするためのビューモデルとして機能することを意図しています。

EDIT（工場出荷時の作成の詳細）

あなたはすべてを行う必要がある、あなたのコントローラでそう

app.factory('CalendarService', [function(){ 
    var calendarEvents = []; // or {} or even null depending on how you want to use the variable 
    return { 
     calendarEvents : calendarEvents 
    }; 
}]); 

、

app.controller('Calendar', ['$scope','$rootScope','$resource','moment', 'CalendarService', function($scope, $rootScope, $resource ,moment, CalendarService) { 
    ... 
    // instead of $rootScope.calendar = new moment (and I don't understand why you are assigning this to a moment but that's another conversation 
    CalendarService.calendarEvents = events; 
}]); 

のような工場を定義することができますイベントデータを使用する必要があるすべてのコントローラーにCalendarServiceを挿入し、calendarEventsフィールドで使用できるようにします。

Answer 2

あります

1）CONCAT（）メソッドは、それが配列（単数または複数）および/またはと結合呼び出された配列で構成される新しい配列を返します。値は引数として提供されます。あなたは、次の反復のために持続するために、値：events = events.concat(entry)を割り当てる必要があります。

2）ネストされた角度ループがあります。しばしば必要ですが、命名規則には注意してください。

angular.forEach($rootScope.activities, function(eachActivity){ 
     angular.forEach(eachActivity.events, function(eachEvent, eachActivity) 

ここで、ループは同じ引数名を共有します。これは、繰り返し処理されているオブジェクトの範囲を理解しようとする開発者の頭痛を本当に発生させる可能性があるため、非常に推奨されません。私はあなたの名前が常にユニークでスコープに明白であることを確認することをお勧めします。あなたは引数名を上書きしているので

3）は、title: eachActivity.titleへのお電話は、この場合にはeachActivity.eventsオブジェクトをforeachループ内のイベントのKEYである内部ループ第二引数、見てされようとしています。キーはプロパティを持たず、常に文字列です - このため、eachActivity変数は定義されていますが、プロパティはありません。

私はこれらのいくつかの事柄を変更して、進捗状況の投稿を編集することをお勧めします。