即使 `$stateparams` 改变,控制器也只初始化一次 [英] controller only initialized once even if `$stateparams` changed

查看:22
本文介绍了即使 `$stateparams` 改变,控制器也只初始化一次的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我最近开始使用 Ionic Framework(因此也使用 Angular.js),但我遇到了 Angular UI 的问题路由器:当它的 $stateParams 之一改变时,我注册的状态之一不会重新初始化.起初我认为它发生是因为状态是抽象的并且有孩子,所以它永远不会直接激活 - 但即使我将它更改为非抽象和最深"状态之一(即在看到状态时的叶子)树结构),问题依然存在.奇怪的是,它似乎不会发生在其他州.

I've recently started working with the Ionic Framework (and therefore with Angular.js as well) and I ran into a problem with the Angular UI Router: One of the states I registered is not re-initialized when one of its $stateParams changes. At first I thought it happens because the state is abstract and has children, so it is never activated directly - but even when I changed it to be non-abstract and one of the "deepest" states (i.e. a leaf when seeing the states within a tree structure), the problem persists. The weird thing is that it seems not to happen on other states.

我尝试了不同的方法并仔细阅读了文档,但我找不到问题的原因.

I have tried different approaches and read the documentation carefully, but I could not find the cause for the issue.

以下是我用来注册状态的代码.状态 app.festival 是我遇到的问题:

The following is the code I use to register the states. The state app.festival is the one I'm having the issue with:

  • 当我第一次链接到 app.festival.overview 状态时,例如使用 URL /festival/33/overview,状态的控制器也是因为 app.festival 的抽象父控制器已正确初始化
  • 但是,当我回到其他地方,然后链接到诸如 /festival/21/overview 之类的东西时,只有这个状态的控制器被重新初始化,而不是它的抽象父控制器(尽管festivalId 的参数是其中的一部分,我想应该会触发重新加载)
  • 这导致由 app.festival 状态管理的实际节日数据(由 festivalId 引用)在整个应用程序中保持不变,因为基本上它只是初始化app.festival 控制器的一个实例",不管$stateParams
  • when I link to the app.festival.overview state for the first time, for example with URL /festival/33/overview, the the state's controller as well as its abstract parent controller for app.festival are initialized correctly
  • but then, when I go back somewhere else, and then link to something like /festival/21/overview, only this state's controller is re-initialized, but not its abstract parent controller (although the parameter for the festivalId is part of it and should trigger a reload I suppose)
  • this results in the actual festival data (referenced by festivalId) which is managed by the app.festival state remains the same throughout the entire app because basically it just initializes one "instance" of the controller for app.festival regardless of different $stateParams

我需要这种结构的原因是需要有一整部分的页面(状态)来处理单个节日(应该由 app.festival 状态管理).

The reason I need that structure is that there needs to be a whole section of pages (states) that deal with a single festival (which should be managed by the app.festival state).

$stateProvider

.state( 'app', {
    url: '',
    abstract: true,
    views: {
        'appContent': {
            templateUrl: 'views/main.html',
            controller: 'MainCtrl'
        }
    }
})

.state( 'app.general', {
    url: '/general',
    abstract: true,
    views: {
        'mainContent': {
            templateUrl: 'views/sections/general.html',
            controller: 'GeneralCtrl'
        }
    }
})

.state( 'app.festival', {
    url: '/festival/{festivalId:int}',
    abstract: true,
    views: {
        'mainContent': {
            templateUrl: 'views/sections/festival.html',
            controller: 'FestivalCtrl'
        }
    }
})

.state( 'app.general.festivals', {
    url: '/festivals',
    views: {
        'generalContent': {
            templateUrl: 'views/pages/general-festivals.html',
            controller: 'GeneralFestivalsCtrl'
        }
    }
})

.state( 'app.general.events', {
    url: '/events',
    views: {
        'generalContent': {
            templateUrl: 'views/pages/general-events.html',
            controller: 'GeneralEventsCtrl'
        }
    }
})

.state( 'app.general.event', {
    url: '/events/{eventId:int}',
    views: {
        'generalContent': {
            templateUrl: 'views/pages/general-event.html',
            controller: 'GeneralEventCtrl'
        }
    }
})

.state( 'app.festival.overview', {
    url: '/overview',
    views: {
        'festivalContent': {
            templateUrl: 'views/pages/festival-overview.html',
            controller: 'FestivalOverviewCtrl'
        }
    }
});

.state( 'app.festival.guide', {
    url: '/guide',
    views: {
        'festivalContent': {
            templateUrl: 'views/pages/festival-guide.html',
            controller: 'FestivalGuideCtrl'
        }
    }
});

如果有人能帮助我就好了,因为我已经花了很多时间研究这个问题,但还没有找到解决方案.如果您需要更深入地了解代码的特定部分,我也很乐意将其发布在这里.

It would be great if anyone could help me out there as I've put quite some hours into researching the issue, but have not found a solution yet. If you need more insight into specific parts of the code, I'll gladly post it here as well.

推荐答案

这是 Ionic 的默认行为.它默认缓存视图和控制器执行以提高性能.您可以使用 cache: false:

This is the default behaviour of Ionic. It by default caches view and controller execution to improve performance. You can disable it with cache: false:

$stateProvider.state('myState', {
   cache: false,
   url : '/myUrl',
   templateUrl : 'my-template.html'
});

或者您可以使用 ui-sref-opts 在 URL 级别禁用它 如何在 ui-sref 标记中放置重新加载选项

Or you can disable it at URL level using ui-sref-opts how to put reload option in ui-sref markup

请参阅缓存文档.

这篇关于即使 `$stateparams` 改变,控制器也只初始化一次的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆