javascript 使用 $stateProvider 的 AngularJS/Ionic 路由 - 第二次调用状态时控制器不会重新加载

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/28087683/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 08:23:25  来源:igfitidea点击:

AngularJS / Ionic routing using $stateProvider - controller is not reloading the second time a state is called

javascriptangularjsionic-frameworkurl-routinghybrid-mobile-app

提问by Will.Harris

Original Question

原始问题

I'm developing a mobile app using the Ionic Framework and AngularJS and I am having issues with controllers not reloading once they have been initialised.

我正在使用 Ionic 框架和 AngularJS 开发一个移动应用程序,我遇到了控制器在初始化后无法重新加载的问题。

One of the state transitions (from 'app.postbox-details'to 'app.audit-questions') should pass a parameter to the 'app.audit-questions'controller but this controller does not update itself with the new parameter because it isn't reloading.

状态转换之一(从'app.postbox-details'to 'app.audit-questions')应该将一个参数传递给'app.audit-questions'控制器,但该控制器不会使用新参数更新自身,因为它没有重新加载。

Code Example

代码示例

app.js file - config

app.js 文件 - 配置

angular.module('sf-maintenance', ['ionic', 'starter.controllers', 'starter.services', 'ngCordova'])           
.config(function ($stateProvider, $urlRouterProvider, $httpProvider) {
    $stateProvider
       .state('home', {
           url: '/home',
           templateUrl: 'templates/home.html',
           controller: 'HomeCtrl',
       })
       .state('app', { //app state being the side-menu
           url: '/app',
           abstract: true, //means that this state will never be activated directly, users will always go to a child state instead.
           templateUrl: 'templates/side-menu.html',
           controller: 'MenuCtrl'
       })       
       .state('app.postbox-details', {
           url: '/postbox-details',
           views: {
               'menuContent': {
                   templateUrl: 'templates/postbox-details.html',
                   controller: 'PostboxDetailsCtrl'
               }
           }
       })
    .state('app.audit-questions', {
        url: '/audit-questions/:postboxGuid',
        views: {
            'menuContent': {
                templateUrl: 'templates/audit-questions.html',
                controller: 'AuditCtrl'
            }
        }
    })
    $urlRouterProvider.otherwise('/home');
});

controller.js file (left out the code that isn't relevant)

controller.js 文件(省略不相关的代码)

angular.module('starter.controllers', [])    
.controller('HomeCtrl', function ($scope) {
})    
.controller('MenuCtrl', function ($scope) {
})    
.controller('PostboxDetailsCtrl', function ($scope, $ionicLoading, $ionicPopup, $cordovaBarcodeScanner, $state, DataService) {

    $scope.postboxGuid = DataService.getNewGUID();
    //Rest of the controller functions are below
})    
.controller('AuditCtrl', function ($scope, $ionicSlideBoxDelegate, $stateParams, DataService) {

    $scope.auditDetails = {
        postboxGuid: $stateParams.postboxGuid
    };    
});

View - navigation code

查看 - 导航代码

The view code to perform the navigations all use <a>tags:

执行导航的视图代码都使用<a>标签:

  • From the home view to the postbox-details view: <a class="button button-block button-dark icon-right ion-chevron-right" href="#/app/postbox-details">New inspection</a>
  • From the postbox-details view to audit-questions view: <a class="button button-block button-dark icon-right ion-chevron-right" ng-click="saveFormData()" ng-href="#/app/audit-questions/{{postboxGuid}}">New audit</a>
  • 从主页视图到邮箱详细信息视图: <a class="button button-block button-dark icon-right ion-chevron-right" href="#/app/postbox-details">New inspection</a>
  • 从邮箱详细信息视图到审计问题视图: <a class="button button-block button-dark icon-right ion-chevron-right" ng-click="saveFormData()" ng-href="#/app/audit-questions/{{postboxGuid}}">New audit</a>

So does anybody know how to get controllers to reload once it has been initialised or if I am going about this problem the wrong way could you guide me to a method that will work?

那么有没有人知道如何让控制器在初始化后重新加载,或者如果我以错误的方式解决这个问题,你能指导我找到一种有效的方法吗?



Updated Information

更新信息

I recently saw a related questionand the response by @Radim K?hler pointed to the answer in this questionwhich provides good information on why it may not be a good idea to use cache:falseon a view because of performance.

我最近看到了一个相关的问题,@Radim K?hler 的回答指出了这个问题的答案,它提供了很好的信息,说明为什么cache:false由于性能而在视图上使用可能不是一个好主意。

I thought I would share this because in some situations you may benefit more performance-wise by using one of Ionic's built-in view life cycle eventsto run code without having to disable the view from being cached.

我想我会分享这个,因为在某些情况下,通过使用Ionic 的内置视图生命周期事件之一来运行代码,而不必禁用视图被缓存,您可能会在性能方面受益更多。

回答by Toxus

Views are standard cached in ionic. The caching can configured in the view or stateprovider.

视图标准缓存在离子中。缓存可以在视图或状态提供程序中配置。

http://ionicframework.com/docs/api/directive/ionNavView/

http://ionicframework.com/docs/api/directive/ionNavView/