问题
我的 Ionic 应用程序允许您从侧边菜单中选择一个项目,然后在主内容区域中显示两个选项卡(任务、消息)。任务和消息选项卡是项目的嵌套状态。
当您在侧边菜单中更改项目时, TaskListCtrl
被执行两次。 见 live demo并在您在项目之间切换时观看控制台。我也有 video它详细显示了这个问题。
如何停止 TaskListCtrl
从执行两次?有没有更好的方法可以构建这些嵌套状态?
代码
完整代码在 GitHub »
这是我的 $stateProvider
配置:
.state('project', {
url: "/projects/:projectID",
abstract: true,
cache: false,
controller: 'ProjectDetailCtrl',
templateUrl: "templates/project.tabs.html",
resolve: {
project: function($stateParams, Projects) {
return Projects.get($stateParams.projectID);
}
}
})
.state('project.tasks', {
url: '/tasks',
views: {
'tasks-tab': {
templateUrl: 'templates/task.list.html',
controller: 'TaskListCtrl'
}
}
})
以及来自
controllers.js
的相关片段:.controller('ProjectDetailCtrl', function($scope, project) {
$scope.project = project;
console.log('=> ProjectDetailCtrl (' + $scope.project.name + ')')
})
.controller('TaskListCtrl', function($scope, $stateParams) {
$scope.tasks = $scope.project.tasks;
console.log('\t=> TaskListCtrl')
console.log('\t\t=> $stateParams: ', $stateParams)
console.log('\t\t=> $scope.tasks[0].title: ', $scope.tasks[0].title)
})
资源
笔记
$stateProvider
中连接 Controller 时可能会发生这种情况并与 ng-controller
- 但是,我已经检查和 我不是在做这个。 我只用 $stateProvider
连接 Controller . 最佳答案
我猜 tuckerjt07是对的。
这似乎是路由和参数以及 ionic 选项卡的问题。
我几乎花了一整天的时间试图弄清楚发生了什么。
我认为问题在于您使用的是带有参数的抽象 Controller ,但这不是问题。
我检查了侧边菜单是否干扰了选项卡,但同样,问题不存在。
我已经使用 controllerAs
检查了试图消除摩擦的范围。并避免引用 $scope 对象来存储 View 模型,但是......没有。
我已经创建了您的应用程序的简化版本 here .
那里没有太多内容,导航是通过标题中的常量进行的。
如您所见,问题仍然存在。
做了一点调试,似乎问题出在here .
该线路两次调用 Controller 。您可以自己检查在 中的第 48435 行添加断点ionic.bundle.js .
您唯一的选择是更改您的 project.tabs.html 并加载没有 subview 的任务列表。像这样的东西:
<ion-view view-title="{{ project.name }}: Tasks">
<ion-tabs class="tabs-icon-top tabs-positive">
<ion-tab title="{{ project.name }} Tasks" icon="ion-home">
<ion-nav-view>
<ion-content>
<ion-list>
<ion-item class="item-icon-right" ng-repeat='task in project.tasks'>
{{ task.title }}
<i class="icon ion-chevron-right icon-accessory"></i>
</ion-item>
</ion-list>
</ion-content>
</ion-nav-view>
</ion-tab>
<ion-tab title="About" icon="ion-ios-football" ui-sref="tabs.tab2">
<ion-nav-view name="tabs-tab2"></ion-nav-view>
</ion-tab>
<ion-tab title="Another" icon="ion-help-buoy" ui-sref="tabs.tab3">
<ion-nav-view name="tabs-tab3"></ion-nav-view>
</ion-tab>
</ion-tabs>
</ion-view>
您可以查看它是如何工作的 here .
我想我们应该打开一个问题。
关于angularjs - Controller 使用 ui-router 嵌套状态执行两次(Ionic),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31392469/