页面状态导航不工作

我有这样的状态页面状态导航不工作

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

它的导航不是导航到指定页面，并在控制台日志也

来源

2015-12-21 manish

难道我帮你去解决呢？ –

啊还没有检查...会检查它 – manish

有没有错误在你的状态有几个问题：

Your第二状态不斜杠（/）
事实上，你的第二个状态是第一位的嵌套状态（因为你使用的语法parent.child状态名称。正因为如此，的第二状态的URL必须是相对于第一状态：

像URL：“/编辑/：域”，将匹配在href：/资料/ MMMMMM /编辑/ 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>

来源

2015-12-22 17:04:34

页面状态导航不工作

回答

相关问题