Question

我设置了UI-Router文档以显示＆＃34;页面＆＃34;演示的各个部分。

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

})();

父州，＆＃34;页面＆＃34;它上面有ui-view，但我不需要＆＃34;显示＆＃34;它。我只对展示其子女感兴趣，例如pages.signin或pages.forgotpassword。

输入网址＆＃34; / forgotpassword＆＃34;把我弹回我的主页，这是＆＃34;否则＆＃34;我的app.module.js中的状态

// 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

有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">

我们可以留下父网址：

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

但子状态的href链接也必须包含父URL：

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

检查here in action

Answer 2

您需要在状态网址前加上父状态的网址。因此，您需要使用浏览器打开的正确网址应为：#/pages/forgotpassword

检查文档URL Routing for Nested States

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

2 个答案: