angularjs - 即使 `$stateparams` 更改, Controller 也仅初始化一次

标签 angularjs angular-ui-router ionic-framework

我最近开始使用 Ionic Framework(因此也使用 Angular.js),并且我遇到了 Angular UI 的问题Router:当我注册的状态之一的 $stateParams 发生更改时,不会重新初始化。起初我认为这种情况发生是因为状态是抽象的并且有子级,所以它永远不会被直接激活 - 但即使我将它更改为非抽象的并且是“最深”的状态之一(即当看到内部状态时的叶子)树结构),问题仍然存在。奇怪的是,其他州似乎没有发生这种情况。

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

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

  • 当我第一次链接到 app.festival.overview 状态(例如使用 URL /festival/33/overview)时,状态的 Controller 也是如此因为 app.festival 的抽象父 Controller 已正确初始化
  • 但是,当我回到其他地方,然后链接到像 /festival/21/overview 这样的东西时,只有这个状态的 Controller 被重新初始化,而不是它的抽象父 Controller (尽管festivalId 的参数是其中的一部分,我想应该会触发重新加载)
  • 这会导致由 app.festival 状态管理的实际节日数据(由 festivalId 引用)在整个应用程序中保持不变,因为基本上它只是初始化app.festival 的 Controller 的一个“实例”,无论 $stateParams
  • 不同

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

$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'
        }
    }
});

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

最佳答案

这是 Ionic 的默认行为。默认情况下,它会缓存 View 和 Controller 执行以提高性能。您可以使用 cache: false 禁用它:

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

或者您可以使用 ui-sref-opts 在 URL 级别禁用它 how to put reload option in ui-sref markup

参见Caching文档。

关于angularjs - 即使 `$stateparams` 更改, Controller 也仅初始化一次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33811303/

相关文章:

angular - 如何在 Ionic v4 中生成有效的自定义组件?

angularjs - ng重复 :dupes - duplicates in repeater with nested ngrepeat and empty strings

angularjs - Angular 应用程序在 Firefox 中中断

javascript - 通过 HTML 初始化 Angular 2 组件的正确方法

javascript - 当有父级 ng-click 时,防止触发嵌套的 ui-sref

angularjs - 在呈现任何 View 或激活 Controller 之前,在 ui 路由中进行条件解析

angular - 电容器存储或 Cordova 存储

javascript - 使用 AngularJS 中的链接覆盖单击表

javascript - Angularjs 1.5.8 - 2 级 ng-repeat 内的单选按钮列表无法正常工作

jquery - Angular `$.ajax` 可以工作,但 '$resource` - 抛出错误如何解决这个问题?