Javascript 在OnsenUI和#x2B中的控制器之间传递数据；AngularJS+；音差

我发现有人问我类似的问题，并回答了我的问题，但我认为我的情况不同。我从一个简单的应用程序的示例代码开始，该应用程序带有使用谷歌地图的滑动菜单

我正在创建一个原型，允许用户提交新项目，这些项目被添加到待处理项目列表中，然后添加到地图中。我现在专注于第一部分——让用户创建项目，并自动更新待提交的列表。然后，我添加了一个简单的表单来创建新项目：

<ons-page>
    <ons-toolbar fixed-style ng-controller="SlidingMenuController">
        <div class="left">
            <ons-toolbar-button ng-click="slidingMenu.toggleMenu()"><ons-icon icon="bars"></ons-icon></ons-toolbar-button>
        </div>
        <div class="center">New Submission</div>
    </ons-toolbar>
    <ons-row style="margin-top: 10px; text-align: center;">
        <ons-col ng-controller="NewSubmissionController">
            <p style="font-size: 12px;">Please insert a brief description of your find and its material.</p>
             <textarea style="width: 97%;" id="subDescrText" class="textarea" rows="4" placeholder="Type your description here..." value="" ng-model="subDescription"></textarea>
        <ons-button style="margin-top: 24px;" ng-click="doStore()">
            Store
        </ons-button>
        </ons-col>
    </ons-row>
</ons-page>

在这个版本中，我尝试使用其他回复中建议的事件系统。不幸的是，它不起作用，因为这两个控制器不是子控制器和父控制器。在NewSubmissionController中移动PendingListController也不起作用，我认为这是因为这两个控制器位于两个不同的视图上

---

从NewSubmissionController调用PendingListController.addPendingItem（）的最佳解决方案是什么？

如果要在控制器之间发送和捕获事件（不共享

$scope

），请使用

$rootScope

及其方法

$on

和

$broadcast

：

myApp.controller("fooCtrl", function($scope, $rootScope){
        $scope.foo = "foo";

        $scope.broadcast = function() {
            $rootScope.$broadcast("fooChange", $scope.foo);
        };
});

myApp.controller("barCtrl", function($scope, $rootScope){
        $scope.bar = null;

        $rootScope.$on("fooChange", function(e, data){
            $scope.bar = data;
        });
});

在

barCtrl

中捕获事件后，可以执行

PendingListController.addPendingItem（）

调用

---

演示

当您使用多个页面时，需要

因此，您可以选择为主导航页面添加一个主控制器（在您的情况下，这将是滑动菜单页面），这样您就可以在子控制器之间共享$rootScope

建议使用依赖注入作为解决方案，您可以使用服务或工厂来帮助在控制器之间“传递/共享”数据

下面的演示代码显示：

• 您如何利用服务让管制员沟通
• $rootScope如何用于实时更新数据

使用服务在控制器之间共享数据

angular.module('app', [])
  .service('mainService', function($http) {
    var self = this;
    self.userList = [];

    self.login = function(newUser) {
      self.userList.push(newUser + ' ' + (self.userList.length + 1));
      return self.userList;
    };
  })

.controller('MainCtrl', function($rootScope, $scope, mainService) {

  $scope.mainAddUser = function() {
    $rootScope.users = mainService.login('Main');
  };
})

.controller('LoginCtrl', function($rootScope, $scope, mainService) {
  $scope.loginAddUser = function() {
    $rootScope.users = mainService.login('Login');
  };
});

---

Demo

演示中的示例很有效，但当我将其集成到现有代码中时，会发生一些奇怪的事情。第一次调用PendingListController.addPendingItem（）时，我没有收到任何警报。我第二次得到它们。第三次，两组警报。以此类推。我明白了——因为在我的例子中，主导航页中有滑动菜单控制器，所以我应该将NewSubmissionController和PendingListController定义为它的子控制器，这样它们就可以使用滑动菜单控制器的作用域作为根作用域了？我按照您的示例重新构造了代码，它成功了。我很感激，但我想更好地理解。它为什么有效？控制器不被定义为任何其他对象的子对象，那么什么是根范围？顺便问一下，有没有关于这些主题的好教程/文档？我可以理解Angular网站上的基本主题，但它比这些主题早停止。这取决于你在html模板中放置控制器的位置。简而言之，作用域是从父到子视图继承的：（rootScope->parent scope->child scope），因此子对象仍然可以访问其父作用域。对于更详细的解释，我发现有很好的示例和图表可以遵循。希望能有帮助。

myApp.controller("fooCtrl", function($scope, $rootScope){
        $scope.foo = "foo";

        $scope.broadcast = function() {
            $rootScope.$broadcast("fooChange", $scope.foo);
        };
});

myApp.controller("barCtrl", function($scope, $rootScope){
        $scope.bar = null;

        $rootScope.$on("fooChange", function(e, data){
            $scope.bar = data;
        });
});

angular.module('app', [])
  .service('mainService', function($http) {
    var self = this;
    self.userList = [];

    self.login = function(newUser) {
      self.userList.push(newUser + ' ' + (self.userList.length + 1));
      return self.userList;
    };
  })

.controller('MainCtrl', function($rootScope, $scope, mainService) {

  $scope.mainAddUser = function() {
    $rootScope.users = mainService.login('Main');
  };
})

.controller('LoginCtrl', function($rootScope, $scope, mainService) {
  $scope.loginAddUser = function() {
    $rootScope.users = mainService.login('Login');
  };
});