在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也不起作用，我估計這是因爲兩個控制器在兩個不同的視圖。

什麼是從NewSubmissionController調用PendingListController.addPendingItem（）的最佳解決方案？

Answer 1

當您使用需要Multiple Pages Managing Pattern多個頁面。

因此，您可以選擇爲主導航頁面添加主控制器（在您的情況下，這將是滑動菜單頁面），因此您可以在子控制器中共享$ 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'); 
    }; 
}); 

演示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()。

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