Angular Ionic UI-Router - 如何確保在嵌套狀態下啟動應用程序時加載所有父視圖？

Question

我有一個ui-router結構：

    .state('app', {
      url: '/app',
      abstract: true,
      templateUrl: 'menu.html',
    })

    .state('app.parent', {
      url: '/parent',
      views: {
        'menuContent': {
          templateUrl: 'parent.html',
        }
      }
    })    

    .state('app.parent.next', {
      url: '/next',
      views : {
        'next' : {
          templateUrl: 'next.html'
        }
      } 
    })

parent.html包含ui-view和app.parent.next鏈接

<ion-view view-title="Parent">

  <ion-nav-buttons side="secondary">
    <button class="button" ng-click="$state.go('app.parent.next')">
      next »
    </button>
  </ion-nav-buttons>

  <ion-content has-header="true">
    <h1>Parent</h1>

    <div ui-view></div>

  </ion-content>
</ion-view>

它工作得很好，但是如果我直接在app.parent.next狀態中啟動應用程序，則標題和模板不存在。

http://michalstefanow.com/ionic.html#/app/parent - 工作得很好
http://michalstefanow.com/ionic.html#/app/parent/next - 加載next嵌套視圖，只是父級中定義的ion-nav-buttons不存在

（提供了托管版本的鏈接，因為要重現它必須以嵌套狀態開始）

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title></title> <link data-require="ionic@1.2.4" data-semver="1.2.4" rel="stylesheet" href="https://code.ionicframework.com/nightly/css/ionic.css" /> <script data-require="ionic@1.2.4" data-semver="1.2.4" src="https://code.ionicframework.com/nightly/js/ionic.bundle.js"></script> <script> angular.module('starter', ['ionic']) .config(function($stateProvider, $urlRouterProvider) { $stateProvider .state('app', { url: '/app', abstract: true, templateUrl: 'menu.html', }) .state('app.parent', { url: '/parent', views: { 'menuContent': { templateUrl: 'parent.html', } } }) .state('app.parent.next', { url: '/next', views : { 'next' : { templateUrl: 'next.html' } } }) // if none of the above states are matched, use this as the fallback $urlRouterProvider.otherwise('/app/parent'); }) </script> </head> <body ng-app="starter"> <ion-nav-view></ion-nav-view> <script type="text/ng-template" id="menu.html"> <ion-side-menus enable-menu-with-back-views="false"> <ion-side-menu-content> <ion-nav-bar style="background-color: transparent !important;"> <ion-nav-back-button> </ion-nav-back-button> <ion-nav-buttons side="left"> <button class="button button-icon button-clear ion-navicon" menu-toggle="left"> </button> </ion-nav-buttons> </ion-nav-bar> <ion-nav-view name="menuContent"></ion-nav-view> </ion-side-menu-content> <ion-side-menu side="left"> <ion-header-bar class="bar-stable"> <h1 class="title">Left</h1> </ion-header-bar> <ion-content> <ion-list> <ion-item menu-close href="#/app/parent"> Parent </ion-item> <ion-item menu-close href="#/app/parent/next"> Directly into next </ion-item> </ion-list> </ion-content> </ion-side-menu> </ion-side-menus> </script> <script type="text/ng-template" id="parent.html"> <ion-view view-title="Parent"> <ion-nav-buttons side="secondary"> <button class="button" ui-sref='app.parent.next'>next »</button> </ion-nav-buttons> <ion-content has-header="true"> <h1>Parent</h1> <h1>Parent</h1> <h1>Parent</h1> <div ui-view="next"></div> </ion-content> </ion-view> </script> <script type="text/ng-template" id="next.html"> <h1>Next</h1> <h1>Next</h1> <h1>Next</h1> </script> </body> </html>

我已經嘗試過類似的純ui-router實現：

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title>UI Router</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.js"></script> <script> angular.module('starter', ['ui.router']) .config(function($stateProvider, $urlRouterProvider) { $stateProvider .state('app', { url: '/app', abstract: true, templateUrl: 'main.html', }) .state('app.parent', { url: '/parent', views: { 'main': { templateUrl: 'parent.html', } } }) .state('app.parent.child', { url: '/child', templateUrl: 'child.html' }) // if none of the above states are matched, use this as the fallback $urlRouterProvider.otherwise('/app/parent'); }); </script> </head> <body ng-app="starter"> <div ui-view></div> <script type="text/ng-template" id="main.html"> <h1>This is main.html</h1> Below is: <pre>ui-view="main"</pre> <div ui-view="main"></div> </script> <script type="text/ng-template" id="parent.html"> <h1>Parent</h1> <a ui-sref="app.parent.child">child »</a> <div ui-view></div> </script> <script type="text/ng-template" id="child.html"> <h1>I am a child</h1> </script> </body> </html>

推測猜測：由於緩存而特定於Ionic東西 - 使用 ui-router 和 ion-tabs 時模板不會更新？

我真正想要做什么？ 只是為了避免 XY 問題 - https://meta.stackexchange.com/questions/66377/what-is-the-xy-problem - 我想引導用戶上傳圖像。 將有幾個步驟，用戶將直接進入狀態app.upload.one而無需直接觸摸app.upload 。 app.upload將保持上傳過程的當前狀態，而每個步驟都會添加描述、標簽等...

Answer 1

我認為 ionic 是單頁應用程序，所以只有一個父級（即 root，如tabs或menu ），其他都是子級，特別重要的是其他都是兄弟姐妹，所以他們不能是父母和孩子的關系。 簡而言之，你只能像app.child那樣使用一個點符號，不要像app.child.grandchild有兩個點符號。

Angular Ionic UI-Router - 如何確保在嵌套狀態下啟動應用程序時加載所有父視圖？

問題描述

1 個解決方案

解決方案1
1 2016-07-18 12:32:06

Angular Ionic UI-Router - 如何確保在嵌套狀態下啟動應用程序時加載所有父視圖？

問題描述

1 個解決方案

解決方案1 1 2016-07-18 12:32:06

解決方案1
1 2016-07-18 12:32:06