從另一個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

您可以使用服務在控制器之間共享數據。 服務為我們提供了一種輕松的方法，使我們可以在整個應用程序中共享數據和功能。

我建議您閱讀本文， 了解如何在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>