2015-12-21 2 views
0

У меня есть это состояниеPage состояние навигация не работает

.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> 

Ее не плыву на данную страницу, и никакой ошибки в консоли журнале также

+0

ли я помог вам решить эту проблему? –

+0

ahh еще проверить ... проверит это – manish

ответ

0

Там есть несколько проблем в ваших штатах:

  1. Ваш второе состояние не начинается с косым черты (/)
  2. В самом деле, вашего второго состоянием является вложенным состоянием первых из них (потому что вы используете синтаксис parent.child в названии государства. Из-за этого, URL-адрес второго состояния должен быть относительно первого состояния:

    что-то вроде URL: «/ редактировать /: поле», который будет соответствовать HREF: /профиль/мммммм/редактировать/111

  3. Как вы метрополия (профиль) не объявлен как абстрактный, вы должны включить в это шаблон другого <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>

Смежные вопросы