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