Question

我想通过导航到其关联的URL来尝试输入ui-router父或子状态。我知道ui-sref是通过a链接进入状态的经过验证的简单方法，但只需在浏览器中输入状态的网址似乎总是将我重定向到$urlRouterProvider.otherwise()声明。

例如，我希望能够通过浏览器中的page导航到example.com/#/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州应该仍然是一个＆＃39}。顶层＆＃39; state注入index.html <ui-view>

如何制作它以便我可以直接导航到URL（甚至带有参数的URL）？ documentation说它可能，但我似乎无法让它发挥作用。

Answer 1

您的参数网址错误，您无法使用固定名称映射网址，其他网址带有参数原因会导致疯狂重写，认为这是一个变量

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

通过这种方式使用网址：

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

Answer 2

我会说，你几乎就在那里。有an updated plunker。但是，虽然您的链接可以（应该）与 # （我们不使用 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})">

检查here

AngularJS通过URL ui-router简单导航到参数化状态

2 个答案: