兄弟之间的状态实例化混乱答案

【问题标题】：State instantiation confusion amongst siblings兄弟之间的状态实例化混乱
【发布时间】：2015-07-07 15:15:10
【问题描述】：

我在 Ionic 和 UI-Router 中完成了示例，但我认为这不是 Ionic 的问题，而是更多特定于 UI-Router 的问题。

我一直认为如果在同一层次结构（兄弟）中切换状态，控制器在任何情况下都不会重新加载，除非您切换到其他分支。看来我错了。

这里是一个例子：http://codepen.io/hawkphil/pen/GJxgvE?editors=101

HTML

  <ion-nav-bar class="bar-positive">
    <ion-nav-back-button class="button-icon ion-arrow-left-c">
    </ion-nav-back-button>
  </ion-nav-bar>

  <ion-nav-view></ion-nav-view>


  <script id="templates/tabs.html" type="text/ng-template">
    <ion-tabs class="tabs-icon-top tabs-positive">

      <ion-tab title="Home" icon="ion-home" href="#/tab/home">
        <ion-nav-view name="home-tab"></ion-nav-view>
      </ion-tab>

      <ion-tab title="About" icon="ion-ios-football" href="#/tab/about">
        <ion-nav-view name="about-tab"></ion-nav-view>
      </ion-tab>

      </ion-tab>

    </ion-tabs>
  </script>

  <script id="templates/home.html" type="text/ng-template">
    <ion-view view-title="Home">
      <ion-content class="padding">
        <p>
          <a class="button icon ion-home" href="#/tab/home"> Home</a>
          <a class="button icon icon-right ion-chevron-right" href="#/tab/fact1">
            Fact1
          </a>
          <a class="button icon icon-right ion-chevron-right" href="#/tab/fact2">
            Fact2
          </a>
          <a class="button icon icon-right ion-chevron-right" href="#/tab/fact3">
            Fact3
          </a>
        </p>
      </ion-content>
    </ion-view>
  </script>

  <script id="templates/fact1.html" type="text/ng-template">
    <ion-view view-title="Fact1">
      <ion-content class="padding">
        <p>
          <a class="button icon ion-home" href="#/tab/home"> Home</a>
          <a class="button icon icon-right ion-chevron-right" href="#/tab/fact1">
            Fact1
          </a>
          <a class="button icon icon-right ion-chevron-right" href="#/tab/fact2">
            Fact2
          </a>
          <a class="button icon icon-right ion-chevron-right" href="#/tab/fact3">
            Fact3
          </a>
        </p>
      </ion-content>
    </ion-view>
  </script>

  <script id="templates/fact2.html" type="text/ng-template">
    <ion-view view-title="Fact2">
      <ion-content class="padding">
        <p>
          <a class="button icon ion-home" href="#/tab/home"> Home</a>
          <a class="button icon icon-right ion-chevron-right" href="#/tab/fact1">
            Fact1
          </a>
          <a class="button icon icon-right ion-chevron-right" href="#/tab/fact2">
            Fact2
          </a>
          <a class="button icon icon-right ion-chevron-right" href="#/tab/fact3">
            Fact3
          </a>
        </p>
      </ion-content>
    </ion-view>
  </script>

  <script id="templates/fact3.html" type="text/ng-template">
    <ion-view view-title="Fact3">
      <ion-content class="padding">
        <p>
          <a class="button icon ion-home" href="#/tab/home"> Home</a>
          <a class="button icon icon-right ion-chevron-right" href="#/tab/fact1">
            Fact1
          </a>
          <a class="button icon icon-right ion-chevron-right" href="#/tab/fact2">
            Fact2
          </a>
          <a class="button icon icon-right ion-chevron-right" href="#/tab/fact3">
            Fact3
          </a>
        </p>
      </ion-content>
    </ion-view>
  </script>

  <script id="templates/about.html" type="text/ng-template">
    <ion-view view-title="About">
      <ion-content class="padding">
        <h3>Create hybrid mobile apps with the web technologies you love.</h3>
        <p>Free and open source, Ionic offers a library of mobile-optimized HTML, CSS and JS components for building highly interactive apps.</p>
        <p>Built with Sass and optimized for AngularJS.</p>
        <p>
          <a class="button icon icon-right ion-chevron-right" href="#/tab/navstack">Tabs Nav Stack</a>
        </p>
      </ion-content>
    </ion-view>
  </script>

  <script id="templates/nav-stack.html" type="text/ng-template">
    <ion-view view-title="Tab Nav Stack">
      <ion-content class="padding">
        <p><img src="http://ionicframework.com/img/diagrams/tabs-nav-stack.png" style="width:100%"></p>
      </ion-content>
    </ion-view>
  </script>

angular.module('ionicApp', ['ionic'])

.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider
    .state('tabs', {
      url: "/tab",
      abstract: true,
      templateUrl: "templates/tabs.html"
    })
    .state('tabs.home', {
      url: "/home",
      views: {
        'home-tab': {
          templateUrl: "templates/home.html",
          controller: 'HomeTabCtrl'
        }
      }
    })
    .state('tabs.fact1', {
      url: "/fact1",
      views: {
        'home-tab': {
          templateUrl: "templates/fact1.html",
          controller: 'Fact1TabCtrl'
        }
      }
    })
    .state('tabs.fact2', {
      url: "/fact2",
      views: {
        'home-tab': {
          templateUrl: "templates/fact2.html",
          controller: 'Fact2TabCtrl'
        }
      }
    })
    .state('tabs.fact3', {
      url: "/fact3",
      views: {
        'home-tab': {
          templateUrl: "templates/fact3.html",
          controller: 'Fact3TabCtrl'
        }
      }
    })
    .state('tabs.about', {
      url: "/about",
      views: {
        'about-tab': {
          templateUrl: "templates/about.html"
        }
      }
    })
    .state('tabs.navstack', {
      url: "/navstack",
      views: {
        'about-tab': {
          templateUrl: "templates/nav-stack.html"
        }
      }
    });


   $urlRouterProvider.otherwise("/tab/home");

})

.controller('HomeTabCtrl', function($scope, $rootScope) {
  console.log('Home');

  $rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){ 
    console.log('State change from: ' + fromState.name + ' to: ' + toState.name);
  });
})

.controller('Fact1TabCtrl', function($scope) {
  console.log('Fact1');
})

.controller('Fact2TabCtrl', function($scope) {
  console.log('Fact2');
})

.controller('Fact3TabCtrl', function($scope) {
  console.log('Fact3');
});

这是状态树：

        Home
     /   |   \
Fact1  Fact2  Fact3

以下是流程（打开控制台日志）：

我从 Home -> Fact1 -> Fact2 -> Fact3 开始。一切都按预期进行，以初始化所有控制器。
然后它从 Fact3 -> Fact1 变得棘手（没有发生任何事情）-> Fact3（再次）-> Fact2（只是为了确保没有实例化控制器）-> Fact3（再次，但是 BOOM 现在突然实例化了 Fact3 控制器 --> WHY??）

console.log 输出

Home
State change from: tabs.home to: tabs.fact1
Fact1
State change from: tabs.fact1 to: tabs.fact2
Fact2
State change from: tabs.fact2 to: tabs.fact3
Fact3
State change from: tabs.fact3 to: tabs.fact1
State change from: tabs.fact1 to: tabs.fact3
State change from: tabs.fact3 to: tabs.fact2
State change from: tabs.fact2 to: tabs.fact3
Fact3

所以现在我比以往任何时候都更加困惑：

为什么要实例化 Fact3？
现在在兄弟状态之间实例化控制器的确切规则是什么？
那么控制器初始化的最佳实践是什么？由于我有两种情况：（a）在应用程序运行时初始化一次且仅一次，（b）每次返回状态时重新初始化，无论状态何时以及之前的状态
李>

【问题讨论】：

这类似于我之前在 Ionic 和 tabs 中看到的东西。出于某种原因，当以某种方式设置时，Ionic 似乎会抓取所有可能的选项卡。（有一个实际的原因，我已经将我的调试日志放在 Ionic 的论坛上，以了解正在发生的事情，但从未获得太多关注）。不过，我很幸运使用 ui-sref 而不是 href 进行导航。您的里程可能会有所不同。

标签： javascript angularjs angular-ui-router ionic

【解决方案1】：

看起来像导致所有这些的视图缓存。

$ionicConfigProvider.views.maxCache(0);

http://codepen.io/hawkphil/pen/OVvzmg

基本上默认情况下，ui-router 会REFRESH所有控制器兄弟：http://plnkr.co/edit/OAB98MvP8NKmskcJkxtd?p=preview

所以我最初的想法是错误的（很多其他人也是如此）。

【讨论】：