頁面狀態導航不工作

我有這樣的狀態頁面狀態導航不工作

.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

頁面狀態導航不工作

回答

相關問題