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>

从另一个AngularJS控制器获取数据

3 个答案: