AngularJS通過URL ui-router輕松導航到參數化狀態

Question

我試圖通過導航到其關聯的URL來進入ui-router父狀態或子狀態。 我知道， ui-sref是通過進入狀態的證明，簡單的方法， a鏈接，但只是打字狀態的網址到瀏覽器似乎總是重定向我到我的$urlRouterProvider.otherwise()語句。

例如，我希望能夠通過瀏覽器中的example.com/#/page進入page狀態。 相反，我被重定向到otherwise 。

JS

angular.module('app', [ 'ui.router', 'subapp']);
angular.module('app').config(function($urlRouterProvider, $locationProvider) {
    }).controller('appCtrl', function(){});

angular.module('subapp', ['ui.router']);
angular.module('subapp').config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.when('#/page/nothing', '/');

    $stateProvider
        .state('page', {
            url: '#/page',
            templateUrl: 'page.tpl.html'
         }) 
         .state('page.edit', {
             url: '/:myparameter',
             templateUrl: 'page-edit.tpl.html'
         });
    $urlRouterProvider.otherwise('/hello');
});

的index.html

<body ng-controller="appCtrl">
This is the index.html file<br>
<a href="#/page">Go to page state</a><br>
<a href="#/page/myparameter">Go to page child state with a parameter</a>
<ui-view></ui-view>

PLNKR： http ：//plnkr.co/edit/HQziTB2CyJrCvbgzzuJm？p = preview

OTE我有一個subapp被注入主服務的應用程序，但我不認為這會有所作為，因為page國家仍然應該是“頂級”狀態注入index.html的<ui-view>

如何做到這一點，以便可以直接導航到URL（甚至是帶有參數的URL）？ 該文檔說這是可能的，但我似乎無法使其正常工作。

Answer 1

您的參數網址錯誤，無法映射具有固定名稱的網址，而其他具有參數原因的網址會導致瘋狂的重寫，以為這是一個變量

        $stateProvider
          .state('page', {
                url: '#/page',
                templateUrl: 'page.tpl.html'
            } 
         ).state('page.edit', {
                url: '/:myparameter',
                templateUrl: 'page-edit.tpl.html'
        });

通過以下方式使用URL：

        $stateProvider
          .state('page', {
                url: '/page',
                templateUrl: 'page.tpl.html'
            } 
         ).state('page.edit', {
                url: '/page/:myparameter',
                templateUrl: 'page-edit.tpl.html'
        });

Answer 2

我會說，你快到了。 有一個更新的塞子。 但是，盡管您的鏈接可以（應該）使用# （我們未使用html5Mode ）

<a href="#/page">
<a href="#/page/myparameter">
<a href="#/page/11">

狀態定義不應包含該符號：

.state('page', {
    // instead of this
    // url: '#/page',
    // we need this
    url: '/page',
    ...
.state('page.edit', {
    // instead of this
    // url: '#/:page',
    // we need this
    url: '/:page',

然后這些也將起作用：

<a ui-sref="page">
<a ui-sref="page.edit({page:123})">
<a ui-sref="page.edit({page:444})">

在這里檢查

AngularJS通過URL ui-router輕松導航到參數化狀態

問題描述

2 個解決方案

解決方案1
1

解決方案2
1 已采納 2015-05-22 05:42:10

AngularJS通過URL ui-router輕松導航到參數化狀態

問題描述

2 個解決方案

解決方案1 1

解決方案2 1 已采納 2015-05-22 05:42:10

解決方案1
1

解決方案2
1 已采納 2015-05-22 05:42:10