我发现了类似的问题,我被问及被回答,但我认为我的情况是不同的。我从示例代码enter link description here开始了一个带有使用Google地图的滑动菜单的简单应用程序。在OnsenUI + AngularJS + PhoneGap控制器之间传递数据
我正在创建一个原型,让用户提交添加到待处理项目列表的新项目,然后添加到地图中。我现在专注于第一部分 - 让用户创建项目,并自动更新未决提交列表。然后我添加了一个简单的表格,创建新的项目:
<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()的最佳解决方案?
只是为了让我得到它 - 因为在我的情况下,我有滑动菜单控制器在主导航页面中,我应该定义我的_NewSubmissionController_和_PendingListController_作为其子控制器,以便他们可以使用作为根的滑动菜单控制器的范围范围? – Btz
我重构了我的代码,遵循你的例子,它工作。我很感激,但我想更好地理解。它为什么有效?控制器没有被定义为任何其他的子项,那么rootScope是什么?顺便说一下,有没有什么好的教程/文档涉及这些主题?我可以关注并理解Angular的网站上的基本内容,但它比这些主题更早停止。 – Btz
这取决于您将控制器放在html模板中的位置。简而言之,作用域是从父视图继承的:(rootScope - >父作用域 - >子作用域),因此子仍然可以访问其父作用域。有关更详细的解释,我发现[角度范围继承](https://github.com/angular/angular.js/wiki/Understanding-Scopes#angular-scope-inheritance)有很好的示例和图表,您可以按照。希望能帮助到你。 –