使用 ui-router 从视图内部显示视图

Question

我有一个 index.html 文件，其视图由 <div ui-view="main"></div>

定义

定义此视图的 HomePageModuleConfig.js 如下所示：

var homePageState = {
    url: '/HomePage/', //the url that will trigger the template and controller to be called
    views: {
        "main": {
            controller: 'HomePageController',
            templateUrl: 'HomePage/HomePage.tpl.html' //template paths are relative to the app folder
        }
    }
};

$stateProvider.state("HomePage", homePageState);

在 HomePage/HomePage.tpl.html 里面，我有另一个定义如下的视图：<div ui-view="tableGrid"></div>

我认为我可以通过向 stateProvider 添加另一个状态来呈现 tableGrid 视图，如下所示：

var archiveState = {
    parent: 'HomePage',
    url: "/Archive/",
    views: {
      "tableGrid@HomePage" : {
        controller: 'ArchiveController',
        templateUrl: 'Archive/Archive.tpl.html' //template paths are relative to the app folder
      }
    }
};

然后继续：

$stateProvider.state("HomePage", homePageState).state('Archive', archiveState);

但是当我访问 /Archive/ 时没有任何加载。

编辑：当我访问 /Archive/ 后检查页面时，<div ui-view"main"></div> 中没有任何内容。

当我访问 /HomePage/ 时，main 模板按预期呈现。

Answer 1

如果您在 url

上看不到任何内容

#/Archive/

你应该知道，url 是继承自父

#/HomePage//Archive/

Other words, the parent(s) url is added as a prefix to current state url defintion

是的，上面有很多//符号，因为url应该这样定义：

var homePageState = {
    // url: "/HomePage/", do not add slash at the end
    url: '/HomePage',
    ...
var archiveState = {
    parent: 'HomePage',
    // url: "/Archive/", do not add slash at the end
    url: "/Archive",
...

如何解决带有父 url 前缀的问题的另一种选择是 （doc link 并引用）:

Absolute Routes (^)

If you want to have absolute url matching, then you need to prefix your url string with a special symbol '^'.

$stateProvider
  .state('contacts', {
     url: '/contacts',
     ...
  })
  .state('contacts.list', {
     url: '^/list',
     ...
  });

So the routes would become:

'contacts' state matches "/contacts"

'contacts.list' state matches "/list". The urls were not combined because ^ was used.

使用 ui-router 从视图内部显示视图

Displaying a view from inside a view using ui-router

javascript

state

angularjs

angular-ui-router

Absolute Routes (^)