Angular UI-router，嵌套状态不显示

Question

我设置了一个 UI-Router 文档来显示演示的 "pages" 部分。

(function() {

  'use strict';
  angular.module('pb.ds.pages').config(function($stateProvider) {
    $stateProvider.state('pages', {
        abstract: true,
        url: '/pages',
        templateUrl: 'modules/pages/templates/pages.html',
        controller: 'PagesController as pages',
        data: {
          pageTitle: 'Pages',
          access: 'public',
          bodyClass: 'pages'
        }
      })
      .state('pages.signin', {
        url: '/signin',
        templateURL: 'modules/pages/templates/signin.html',
        controller: 'SignInController as signin'
      })
      .state('pages.forgotpassword', {
        url: '/forgotpassword',
        templateURL: 'modules/pages/templates/forgotpassword.html',
        controller: 'ForgotPasswordController as forgot'
      })
      .state('pages.404', {
        url: '/404',
        templateURL: 'modules/pages/templates/404.html',
        controller: '404Controller'
      });
  });

})();

parent状态，"pages"上面有ui-view，除此之外我不需要"show"。我只对显示它的 children 感兴趣，例如 pages.signin 或 pages.forgotpassword.

输入 url“/forgotpassword”会使我返回主页，这是我 app.module.js

中的 "otherwise" 状态

// UI ROUTER CONFIG
angular.module('app').config(function($stateProvider) {
    $stateProvider.state('otherwise', {
      url: '*path',
      template: '',
      controller: function($state) {
        $state.go('dashboard');
      }
    });
});

控制台没有错误，所有有问题的页面都链接在我的index.html。

我确定我一定错过了一些明显的东西。有什么线索吗？

更新

如果我输入 /pages/forgotpassword，它确实会转到正确的路径，但视图未被模板填充...

Answer 1

您需要在状态 url 前加上父状态的 url 前缀。所以你需要用浏览器打开的正确url应该是：#/pages/forgotpassword

查看文档URL Routing for Nested States

Answer 2

有a working plunker

我们必须像这样调整状态定义：

 $stateProvider.state('pages', {
    abstract: true,
    //url: '/pages',
    templateUrl: 'modules/pages/templates/pages.html',
    controller: 'PagesController as pages',
    data: {
      pageTitle: 'Pages',
      access: 'public',
      bodyClass: 'pages'
    }
  })
  .state('pages.signin', {
    url: '/signin',
    // templateURL: 'modules/pages/templates/signin.html',
    templateUrl: 'modules/pages/templates/signin.html',
    controller: 'SignInController as signin'
  })
  .state('pages.forgotpassword', {
    url: '/forgotpassword',
    //templateURL: 'modules/pages/templates/forgotpassword.html',
    templateUrl: 'modules/pages/templates/forgotpassword.html',
    controller: 'ForgotPasswordController as forgot'
  })

最重要的是用 templateUrl 替换 templateURL。 Javascript（和 UI-Router）区分大小写。

我们也不需要为 parent 定义 url...它可能只是 child 状态定义

最后，我们必须确定，我们的 parent 包含一些目标 ui-view=""，其中将放置 child 个状态。例如。这是 plunker pages.html:

<div>
  <h3>pages</h3>      
  <hr />       
  <div ui-view=""></div>      
</div>

这些链接将按预期工作：

//href
<a href="#/signin">
<a href="#/forgotpassword">
//ui-sref
<a ui-sref="pages.signin">
<a ui-sref="pages.forgotpassword">

我们可以离开 parent url:

 $stateProvider.state('pages', {
    abstract: true,
    url: '/pages',
    ...

但是 child 州的 href 链接也必须包含 parent url：

<a href="#/pages/signin">
<a href="#/pages/forgotpassword">

检查一下here in action

Angular UI-router，嵌套状态不显示

Angular UI-router, nested states don't show

javascript

angularjs

angular-ui-router