別のAngularJSコントローラからデータを取得

Question

私はまだIonic/Cordova/AngularJSで開発するのが非常に新しいです。

今私は2つのコントローラ、 "グループ"と "イベント"があります。私の目標は、グループを作成し、別々のページでイベントを作成することです。グループが作成されると、ユーザーは「イベントの作成」画面でこのグループを選択できるようになります。しかし、私は私のグループを表示することができません。私はHTMLオプションフィールドで単純なng-controllerオプションを使用すると思っていましたが、それは可能ではないようです。私はすべてを同じコントローラに入れてみましたが、うまくいきましたが、それは簡単に非常に混乱します。私はこれをどのように達成できるのか誰にでも教えてくれますか？ありがとう！

<label class="item item-input item-select"> 
        <div class="input-label"> 
         Group 
        </div> 
         <select ng-model="event.groupname"> <!-- this is in my eventscontroller--> 
          <option ng-repeat="group in groups">{{group.name}}</option> <!-- these groups are in GroupsController, this doesn't work --> 
         </select> 
       </label> 

Answer 1

コントローラに名前を付けて名前で呼んだことがありますか？

<label class="item item-input item-select" data-ng-controller="events as eventsCtrl" > 
    <div class="input-label"> 
     Group 
    </div> 
    <select ng-model="eventsCtrl.groupname" data-ng-controller="groups as groupsCtrl" > <!-- this is in my eventscontroller--> 
     <option ng-repeat="group in groupsCtrl.groups">{{group.name}}</option><!-- these groups are in GroupsController, this doesn't work --> 
    </select> 
</label> 

Answer 2

ユーザコントローラで作成されたグループのリストを使用する場合は、非常に簡単です...各グループをrootScopeアレイに追加するだけです。

$rootScope.groupList = [] 
$rootScope.groupList.push($scope.group) //assuming $scope.group is where use save single group data 

よう 何か今、あなたは任意のコントローラで$ rootScope.groupListにアクセスし、

$rootScope.groupList 

へのアクセスが、rootScopeは非常に良い方法ではありません使用して、任意のコントローラ内のリスト・グループを取得することができます。コントローラ間でデータを共有する最善の方法はサービスですが、あなたがAngularを初めて使っていればrootscopeに行くことができますが、サービスは複数のコントローラ間でデータを共有するための最良の方法です。

Answer 3

サービスを使用して、コントローラ間でデータを共有できます。サービスは、アプリ全体でデータや機能を簡単に共有する手段を提供します。

how to share data between controllers in AngularJSでこの記事を読むことをお勧めします。ここで

あなたは

<!-- SharedService --> 
<script type="text/javascript"> 
    angular.module('myApp') 
    .service('SharedService', [function() { 
     var main = {}; 
     main.eventGroupName = ''; 

     main.getEventGroupName = function(){ 
      return main.eventGroupName; 
     }; 
     main.setEventGroupName = function(groupName){ 
      main.eventGroupName = groupName; 
     }; 

     return main;  
    }]); 
</script> 

<!-- GroupsController --> 
<script type="text/javascript"> 
    angular.module('myApp') 
    .controller('GroupsController', ['$scope', 'sharedService', function ($scope, SharedService) { 
     $scope.event.groupname = SharedService.getEventGroupName(); 
     // Remaining code for GroupsController 
     // 
     // 
    }]); 
</script> 

<!-- Eventscontroller --> 
<script type="text/javascript"> 
    angular.module('myApp') 
    .controller('EventsController', ['$scope', 'sharedService', function ($scope, SharedService) { 
     var groupName = 'Another name'; 
     SharedService.setEventGroupName(groupName); 
     // Remaining code for Eventscontroller 
     // 
     // 
    }]); 
</script> 

<!-- View --> 
<label ng-controller="GroupsController" class="item item-input item-select"> 
    <div class="input-label"> 
     Group 
    </div> 
     <select ng-model="event.groupname"> <!-- this is in my EventsController--> 
      <option ng-repeat="group in groups">{{group.name}}</option> <!-- these groups are in GroupsController, this doesn't work --> 
     </select> 
</label>