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

Question

我设置了一个 UI-Router 文档来显示演示的“页面”部分。

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

})();

父状态“页面”上有 ui-view，但除此之外我不需要“显示”它。我只对显示它的子项感兴趣，例如 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 它确实会转到正确的路径，但是 View 没有被模板填充...

Answer 1

有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)区分大小写。

我们也不需要为父级定义 url...它可能只是子级定义

最后，我们必须确定，我们的父级包含一些目标 ui-view="" 将放置子状态。例如。这是 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">

我们可以保留父 url:

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

但是子状态的 href 链接也必须包含父 url:

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

查一下here in action