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

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

例如，我希望能够导航到page状态，通过在浏览器中进入example.com/#/page。相反，我被重定向到otherwise。

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

另外，我有一个subapp服务，它被注入到主应用程序中，但我不认为这会有什么不同，因为page状态应该仍然是注入到index.html <ui-view>的"顶级"状态

我怎么能使它，以便我可以导航到一个URL(甚至一个参数)直接?文档说这是可能的，但我似乎不能让它工作。

我想说，你就快成功了。有一个更新的活塞。但是，虽然您的链接可以(应该)使用 # (我们不是使用 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})">

点击这里

您的参数URL是错误的，您不能映射URL与固定名称和其他URL与参数的原因会导致重写疯狂认为这是一个变量

        $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'
        });

相关内容

最新更新

热门标签：