gpt4 book ai didi

javascript - sibling 之间的状态实例化困惑

转载 作者:行者123 更新时间:2023-11-28 00:07:17 25 4
gpt4 key购买 nike

我在 Ionic 和 UI-Router 中完成了示例,但我认为这不是 Ionic 的问题,而是更多关于 UI-Router 的具体问题。

我总是假设如果在同一层次结构级别(兄弟)切换状态, Controller 在任何情况下都不会重新加载,除非您切换到其他分支。看来我错了。

这是一个示例: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>

JS

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

以下是流程(打开控制台日志):

  • 我从首页 -> Fact1 -> Fact2 -> Fact3 开始。一切都按预期发生,初始化所有 Controller 。

  • 然后,从Fact3 -> Fact1(什么也没发生)-> Fact3(再次)-> Fact2(只是为了确保没有实例化 Controller )-> Fact3(同样,但是BOOM Fact3 Controller 现在突然实例化了 --> 为什么?)

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

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

  1. 为什么要实例化 Fact3?

  2. 现在 Controller 在兄弟状态之间实例化的确切规则是什么?

  3. 那么 Controller 初始化的最佳实践是什么?因为我有两种情况:(a)在应用程序运行时初始化一次且仅一次,(b)每次回到状态时重新初始化,无论状态何时以及之前如何

    <

最佳答案

看起来像 View 缓存导致了所有这些。

$ionicConfigProvider.views.maxCache(0);

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

基本上默认情况下,ui-router 会刷新所有 Controller 同级:http://plnkr.co/edit/OAB98MvP8NKmskcJkxtd?p=preview

所以我原来的想法是错误的(很多其他人也是如此)。

关于javascript - sibling 之间的状态实例化困惑,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31227403/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com