控制器执行两次ui-router嵌套状态（Ionic）

Question

问题

My Ionic应用程序使您可以从侧面菜单中选择一个项目，然后在主要内容区域中显示两个选项卡（任务，消息）。任务和消息选项卡是项目的嵌套状态。

在侧面菜单中更改项目时，TaskListCtrl将执行两次。在项目之间进行切换时，请观看实时演示并观看控制台。我也有一个视频，详细显示了该问题。

如何停止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)
})

资源资源

• 现场演示（在项目之间进行更改时观看控制台日志）
• 显示问题的视频
• GitHub上的代码

笔记

• 我知道StackOverflow上也有类似的问题-但是，他们提供的解决方案都无法解决我的问题。*
• 我已经读过，在将控制器$stateProvider与之连接时都可能发生这种情况，ng-controller但是，我已经检查过了，但是我没有这样做。我只将控制器附加到$stateProvider。

Answer 1

我想tuckerjt07是对的。

这似乎是路由、参数和离子选项卡的问题。我几乎花了一整天的时间试图弄清楚发生了什么事。

我认为问题在于您使用带有参数的抽象控制器，但这不是问题。

我已经检查过侧面菜单是否干扰了选项卡，但问题仍然不存在。

我已经检查了范围，试图消除使用controllerAs和避免引用 $scope 对象来存储视图模型的摩擦，但是......什么也没有。

我在这里创建了您的应用程序的简化版本。
那里没有太多内容，导航是通过标题中的常量进行的。如您所见，问题仍然存在。

做了一些调试，看来问题就出在这里。
该线路调用控制器两次。您可以自己检查一下，在ionic.bundle.js的第 48435 行添加断点。

您唯一的选择是更改project.tabs.html并加载没有子视图的任务列表。像这样的东西：

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

您可以在这里查看它是如何工作的。

我想我们应该提出一个问题。