Problem

My Ionic app lets you choose a Project from the side menu, and then displays two tabs (Tasks, Messages) in the main content area. The tasks and messages tabs are nested states of project.

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

When you change projects in the side menu, TaskListCtrl gets executed twice. See the live demo and watch the console as you change between projects. I also have a video which shows the issue in detail.

当您在侧边菜单中更改项目时，TaskListCtrl将执行两次。在项目之间切换时，请参阅实时演示并观察控制台。我还有一个视频，详细显示了这个问题。

How do I stop TaskListCtrl from executing twice? Is there a better way I could be structuring these nested states?

如何停止TaskListCtrl执行两次？有没有更好的方法来构建这些嵌套状态？

Code

Full code is on GitHub »

完整代码在GitHub上»

Here's my $stateProvider config:

这是我的$ 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'
    }
  }
})

And the relevant snippet from controllers.js:

来自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)
})

Resources

Live demo (watch the console logs as you change between projects)
现场演示（在项目之间切换时观察控制台日志）
Video showing the issue
视频显示问题
Code on GitHub
GitHub上的代码

Notes

I am aware there are similar questions on * — however, none of the solutions they offer solved my issue.*
我知道*上有类似的问题 - 但是，他们提供的解决方案都没有解决我的问题。*
I've read this can happen when attaching the controller both in $stateProvider and with ng-controller — however, I've checked and I'm not doing this. I'm only attaching the controller with $stateProvider.
我已经读过在$ stateProvider和ng-controller中连接控制器时会发生这种情况 - 但是，我已经检查过了，我没有这样做。我只用$ stateProvider附加控制器。

1 个解决方案

#1

I guess tuckerjt07 is right.

我猜tuckerjt07是对的。

It seems to be an issue with routing and parameters and ionic tabs. I've spend almost the whole day trying to figure out what is going on.

这似乎是路由和参数以及离子选项卡的问题。我花了差不多一整天都想弄清楚发生了什么。

I thought the problem was with the fact you're using an abstract controller with parameters, but that's not the problem.

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

I've checked if the side menu was interfering with tabs but, again, the problem is not there.

我已经检查了侧边菜单是否干扰了标签，但是，问题不在那里。

I've checked the scope trying to eliminate friction using controllerAs and avoiding to reference the $scope object to store the viewmodel but ... nothing.

我已经检查了范围，尝试使用controllerAs消除摩擦，并避免引用$ scope对象来存储viewmodel但是......什么都没有。

I've created a simplified version of your application here.
There's not much in there and the navigation is through constants in the header. As you can see the problem is still there.

我在这里创建了一个简化版的应用程序。那里没有多少，导航是通过标题中的常量。你可以看到问题仍然存在。

Doing a little bit of debugging it seems that the problem sits here.
That line calls the controller twice. You can check it yourself adding a breakpoint at line 48435 in ionic.bundle.js.

进行一些调试似乎问题就在这里。该行调用控制器两次。你可以自己检查一下在ionic.bundle.js的48435行添加一个断点。

The only option you have is to change your project.tabs.html and load the list of tasks without the sub-view. Something like this:

您唯一的选择是更改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>

You can check how it works here.

你可以在这里查看它的工作原理。

I guess we should open an issue.

我想我们应该开个问题。

#1