Question

您好我有一点问题，我现在试图解决3天了。这似乎很简单，但我不知道是什么给了我这么多问题。

我有一个包含viewA和viewB子视图的主父视图。我想从viewA导航到viewB，从viewB导航到viewA，但问题是我可以从viewA导航到viewB，但不能从viewB导航到viewA。

我底部有一个工作的代码。

这是我的HTML。

    <html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <title></title>

    <link href="http://code.ionicframework.com/1.0.1/css/ionic.min.css" rel="stylesheet">
    <script src="http://code.ionicframework.com/1.0.1/js/ionic.bundle.min.js"></script>
  </head>

  <body>

    <ion-nav-view></ion-nav-view>

    <script id="templates/main.html" type="text/ng-template">

    <div class="bar bar-header bar-dark">
      <h1 class="title">bar-dark</h1>
    </div>

      <ion-nav-view name="viewA"></ion-nav-view>
      <ion-nav-view name="viewB"></ion-nav-view>

    </script>

    <script id="templates/viewA.html" type="text/ng-template">
      <div style='padding-top: 45px'>
        <div class="row">
          <div class="col">
            <a ui-sref="main.viewB" class="button button-stable">Go to view B</a>
          </div>
        </div>
      </div>
    </script>

    <script id="templates/viewB.html" type="text/ng-template">
      <div style='padding-top: 45px'>
        <div class="row">
          <div class="col">
            <a ui-sref="main.viewA" class="button button-stable">Go to view A</a>
          </div>
        </div>
      </div>
    </script>

  </body>
</html>

这是我的javascript

    angular.module('ionicApp', ['ionic'])

.config(function($stateProvider, $urlRouterProvider) {

  $urlRouterProvider.otherwise("/main/viewA");

  $stateProvider
    .state('main', {
    url:'/main',
    abstract: true,
    templateUrl: "templates/main.html"
    })

    .state('main.viewA', {
    url: '/viewA',
    views: {
      'viewA': {
        templateUrl: 'templates/viewA.html'
      }
    }
  })

  .state('main.viewB', {
    url: '/viewB',
    views: {
      'viewB': {
        templateUrl: 'templates/viewB.html'
      }
    }
  })

})

codepen example

Answer 1

指点很少......

您的ion-nav-view模板中不需要多个和/或名称main，一个就足够了。其次，bar bar-header bar-dark类和padding-top: 45px内联样式将一些元素推出视图（至少在我的机器上）。

因此可以使用工作模板。

<body>
  <ion-nav-view></ion-nav-view>

  <script id="templates/main.html" type="text/ng-template">
    <div>
      <h1 class="title">parent view</h1>
      <ion-nav-view></ion-nav-view>
    </div>     
  </script>

  <script id="templates/viewA.html" type="text/ng-template">
    <div class="row"> 
      <div class="col">
        <a ui-sref="main.viewB" class="button button-stable">Go to view B</a>
      </div>
    </div>
  </script>

  <script id="templates/viewB.html" type="text/ng-template">
    <div class="row">
      <div class="col">
        <a ui-sref="main.viewA" class="button button-stable">Go to view A</a>
      </div>
    </div>
  </script>

</body>

而且你的路由过于复杂，接下来会这样做。

$stateProvider
  .state('main', {
    url:'/main',
    abstract: true,
    templateUrl: "templates/main.html"
  })  
  .state('main.viewA', {
    url: '/viewA',
    templateUrl: 'templates/viewA.html'
  })
  .state('main.viewB', {
    url: '/viewB',
    templateUrl: 'templates/viewB.html'
  });

angular ui-router如何在嵌套视图中导航

1 个答案: