Javascript 使用ui路由器从视图内部显示视图

我有一个

index.html

文件，该文件的视图由

定义此视图的

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);

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

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",
...

在

主页/HomePage.tpl.html

中，我有另一个定义如下的视图：

我想我可以通过向stateProvider添加另一个状态来呈现

tableGrid

视图，如下所示：

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);

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

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",
...

然后再加上：

$stateProvider.state（“主页”，homePageState）.state（“存档”，archiveState）

但当我访问/存档/什么都不加载时

编辑：当我在访问/Archive/后检查页面时，
中没有任何内容

当我访问/HomePage/时，
主
模板按预期呈现。
以防在url上看不到任何内容

#/Archive/

您应该知道，该url是从父级继承的

#/HomePage//Archive/

换句话说，父url作为当前状态url定义的前缀添加

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

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);

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

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和cite）：

如果希望绝对url匹配，则需要在url字符串前面加上特殊符号“^”

因此，路线将变成：


'contacts'状态匹配“/contacts”
'contacts.list'状态匹配“/list”。未合并URL，因为使用了^

你能提供jsfiddle或plunker链接吗？如果有帮助，那就太好了！享受强大的用户界面路由器，先生；）