A controller that runs twice with nested states ui-router (Ionic)

Question

Problem

My Ionic app allows you to select a project from the side menu, and then displays two tabs (Tasks, Messages) in the main content area. The task and message tabs are sub-states of the project.

When changing projects in the side menu, it is executed twice. Watch a live demo and watch the console as you change between projects. I also have a video that details the problem. TaskListCtrl

How to stop TaskListCtrlexecution twice? Is there a better way to structure these nested states?

The code

The full code is on GitHub "

Here is my $stateProviderconfig:

.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 viewmodel, ... .

.
, . , .

, , .
. , 48435 ionic.bundle.js.

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

, .

, .