Передача данных между контроллерами в OnsenUI + AngularJS + PhoneGap

Question

Я нашел похожие вопросы к моему вопросу и ответил, но я думаю, что мой сценарий отличается. Я начал с примера кода enter link description here для простого приложения с раздвижным меню, которое использует Карты Google.

Я создаю прототип, который позволяет пользователям отправлять новые элементы, которые добавляются в список ожидающих элементов, а затем добавляется на карту. Сейчас я сосредоточен на первой части - позволяя пользователям создавать элементы и автоматически обновлять список ожидающих представлений. Затем я добавил простую форму, чтобы создать новый предмет:

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

И еще одну страницу для просмотра списка созданных представлений:

<ons-page> 
    <ons-toolbar> 
     <div class="left"> 
      <ons-toolbar-button ng-click="slidingMenu.toggleMenu()"><ons-icon icon="bars"></ons-icon></ons-toolbar-button> 
     </div> 
     <div class="center">Pending Submissions</div> 
    </ons-toolbar> 
    <div style="text-align: center;"> 
     <ons-list id="pendingList" var="aPendingList" ng-controller="PendingListController"> 
      <ons-list-item ng-repeat="pi in pendingItems"> 
       <p>{{pi.description}}</p> 
       <span>{{pi.material}}</span> 
      </ons-list-item> 
     </ons-list> 
    </div>div> 
    <p style="margin-top: 12px; text-align: center; width: 100%;" > 
     <ons-button ng-click=""> 
      Upload All 
     </ons-button> 
    </p> 
</ons-page> 

Затем я добавил эти контроллеры:

app.controller('NewSubmissionController', function($scope) { 
    $scope.selMat; 
    $scope.subDescription; 

    $scope.doStore = function() { 
     alert('In NewSubmissionController.doStore() - Sel material: ' + $scope.selMat + '\nDescr: ' + $scope.subDescription); 

     var newPI = new SubmissionItem($scope.selMat, $scope.subDescription, ''); 
     $scope.$emit('newPI', newPI); 
     slidingMenu.setMainPage('pendingList.html', {closeMenu: true}); 
    }; 

}); 

// Pending list controller 
app.controller('PendingListController', function($scope) { 
    $scope.pendingItems = []; 
    $scope.$on('newSubEvent', function(e, subMat, descr) { 
     alert('In PendingListController, event newSubEvent - sub mat: ' + subMat + '\nDescription: ' + descr); 
    }); 

    $scope.addPendingItem = function(newPi) { 
     alert('In PendingListController.addPendingItem() - ' + newPi); 
     $scope.pendingItems.unshift(newPi); 
     // Some code here to update the list of pending submissions... 
    }; 
}); 

В этой версии Я попытался использовать систему событий, как это было предложено в других ответах. К сожалению, это не работает, потому что два контроллера не являются дочерними и родительскими. Перемещение PendingListController внутри NewSubmissionController тоже не работает, и я считаю, это потому, что два контроллера находятся на двух разных видах.

Что является лучшим решением для вызова PendingListController.addPendingItem() из NewSubmissionController?

Answer 1

Как вы используете несколько страниц, которые требуют Multiple Pages Managing Pattern.

Итак, у вас есть выбор, чтобы добавить основной контроллер для главной страницы навигации (в вашем случае это будет скользящая страница меню), поэтому вы можете совместно использовать $ rootScope среди дочерних контроллеров.

В качестве решения целесообразно использовать Injection Dependency, вы можете использовать сервис или завод, чтобы помочь «передавать/делиться» вашими данными между контроллерами.

код демо ниже показывает:

• как вы можете использовать службы, чтобы контроллеры общаться
• как $ 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'); 
    }; 
}); 

Демо-версия http://plnkr.co/edit/OvG0oj6EmDU5GMi1eBaU?p=preview

Answer 2

Если вы хотите, чтобы отправлять и фиксировать события между контроллерами (которые не разделяют $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() call.

DEMO http://jsbin.com/kolorixoti/1/edit?html,js,output