Question

我有这个状态

  .state('profile', {
    url: "/profile/:profileId",
    templateUrl: 'templates/profilePages/userProfile.html',
    controller: 'ProfileController'      
  })
  .state('profile.edit', {
    url: "profile/edit/:profileId/:field",
    templateUrl: 'templates/profilePages/edit-pages/edit.html',
    controller: 'ProfileController'      
  })

我正在尝试浏览

<a href="#/profile/edit/mmm/111" class="ion-edit"></a>

它没有导航到给定页面，并且在控制台日志中也没有错误

Answer 1

你们有几个问题：

您的第二个状态不是以斜线开头（ / ）
实际上，你的第二个状态是第一个状态的嵌套状态（因为你在状态名称中使用语法 parent.child 。因此，第二个州的网址必须相对于第一个州：

url：“/ edit /：field”，与href匹配： / profile / mmmmmm / edit / 111
由于您的父状态（个人资料）未被声明为抽象，您应该在其模板中包含另一个<ui-view>元素以显示子状态，否则您将不会看到它，（我猜这不是你所期望的）。

我认为您必须详细审核ui-router nested states documentation。

我附加了一些代码，您可以运行以查看结果。

angular.module('ionicApp', ['ionic'])


.config(function($stateProvider, $urlRouterProvider){

  $stateProvider
     .state('main', {
    url: "/main",
    template: '<ion-content class="has-header">' + 
                  '<a href="#/profile/mmm"                              > Profile       </a>' + 
                  '</br></br>' + 
                  '<a href="#/profile/mmmmmm/edit/111"  class="ion-edit"> Edit profile  </a>' + 
              '</ion-content>'
  })
  
     .state('profile', {
    url: "/profile/:profileId",
    template: '<ion-content class="has-header">' + 
                 '<h3>'+
                   '<button ui-sref="main" class="ion-chevron-left button-clear"></button>' +      
                   'This is the profile ' +
                 '</h3>' +    
                 '<ui-view></ui-view>' + 
              '</ion-content>'
  })
   
  .state('profile.edit', {
    url: "/edit/:field",
    template: '<ion-content class="has-header">' + 
                 '<h3> Nested view to edit profile </h3>' +    
              '</ion-content>'
  })
   
  
  
  $urlRouterProvider.otherwise('/main');
  
})

<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>Test</title>
  <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
  <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>

<body> 
<ion-header-bar class="bar-positive">
  </ion-header-bar>
  <ui-view></ui-view>
</body>

  
</html>

页面状态导航不起作用

1 个答案: