【问题标题】:AngularJS / Ionic routing using $stateProvider - controller is not reloading the second time a state is called使用 $stateProvider 的 AngularJS / Ionic 路由 - 控制器不会在第二次调用状态时重新加载
【发布时间】:2015-01-22 11:30:14
【问题描述】:

原始问题

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

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

代码示例

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 文件(省略不相关的代码)

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

查看 - 导航代码

执行导航的视图代码都使用<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>

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


更新信息

我最近看到了related question,@Radim Köhler 的回复指出了this question 中的答案,它提供了很好的信息,说明为什么由于性能原因在视图上使用cache:false 可能不是一个好主意。

我想我会分享这个,因为在某些情况下,您可以通过使用Ionic's built-in view life cycle events 之一来运行代码,而不必禁用缓存视图,从而在性能方面受益更多。

【问题讨论】:

  • 使用 ui-sref 代替 ng-href
  • 第一个锚点使用ui-sref="app.postbox-details" & 第二个锚点使用ui-sref="app.audit-questions({postboxGuid: postboxGuid})" 而不是各自的href
  • 与控制器相关的大多数问题都是拼写错误和注入错误;检查你注入每个控制器的内容并使用浏览器的控制台来调试错误

标签: javascript angularjs ionic-framework url-routing hybrid-mobile-app


【解决方案1】:

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

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

【讨论】:

  • 感谢 Toxus 这解决了问题 :) 我完全忽略了 Ionic 如何处理 ion-nav-view 中的状态变化
  • 我认为这个问题只存在于最新版本的 Ionic。我有一个带有旧离子版本的应用程序,其中我有 cache=false 并且控制器仍然可以正常工作。
猜你喜欢
  • 1970-01-01
  • 2014-02-03
  • 1970-01-01
  • 2016-07-12
  • 1970-01-01
  • 2018-04-30
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多