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

Getting Data From Another AngularJS Controller

本文关键字：获取 数据 控制器 AngularJS 另一个      更新时间：2023-09-26

所以我对Ionic/Cordova/AngularJS的开发还是很陌生的。

现在我有2个控制器，"组"answers"事件"。我的目标是创建一个组，并在不同的页面上创建一个事件。一旦创建了一个组，我希望用户能够在他们的"创建事件"屏幕中选择这个组。然而，我就是不能让我的团队出现。我认为一个简单的ng-controller选项在我的HTML选项字段会做到这一点，但这似乎是不可能的。我尝试着将所有内容放在同一个控制器中，但这很容易变得非常混乱。有没有人能告诉我怎样才能做到这一点?谢谢!

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

您是否尝试过命名控制器并按名称调用它们?

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

如果你想使用在users控制器中创建的组列表，那么它很简单…只需在rootScope数组中添加每个组。就像

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

现在你可以访问$rootScope。并通过访问

获取任意控制器中的组列表
$rootScope.groupList

，但使用rootScope不是很好的做法。在控制器之间共享数据的最佳方式是服务，但如果你是Angular的新手，你现在可以选择rootScope，但服务是在多个控制器之间共享数据的最佳方式。

你可以使用service在你的控制器之间共享数据。服务为我们在整个应用程序中共享数据和功能提供了一种简单的方法。

我建议你阅读这篇关于如何在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>
相关文章：