Question

正如我在标题中所写，我无法理解如何使用嵌套视图。我试图使用UI-Router。

比如我说以下html：

<div ui-view="viewA"></div>
<div ui-view="viewB"></div>

我希望为"viewA"和"viewB"

注入两个不同的模板

JS路线：

function configB($urlRouterProvider, $stateProvider){

    $urlRouterProvider.otherwise("/");

    $stateProvider
        .state("/",{
           url: "/",
           templateUrl : "/testingBlock.htm",
           controllerAs : "MainCTRL as ctrl"
        })
        .state("login",{
            url: "/login",
            templateUrl : "/app/templates/login.htm",
            controllerAs : "MainCTRL as ctrl"
        })
        .state("multi",{
            url: "/multi",
            templateUrl : "/app/templates/multipleView.htm",
            controllerAs : "MainCTRL as ctrl"
        });

}

＆＃34; /app/templates/multipleView.htm" 的HTML

<div ui-view="viewA"></div>
<div ui-view="viewB"></div>

Answer 1

有a working plunker。国家定义就像这样

// parent       
.state("multi", {
  url: "/multi",
  views: { 
    '': {
      templateUrl: "app/templates/multipleView.htm",
      controllerAs: "MainCTRL as ctrl",
    },
    'viewA@multi': {
      template: "multi parent content",
    },
    'viewB@multi': {
      templateUrl: "testingBlock.htm",
      controllerAs: "MainCTRL as ctrl",
    },
  }
})
// child
.state("multi.child", {
  url: "/child",
  views: { 
    'viewA': {
      template: "multi child content",
    },
    'viewB': {
      templateUrl: "testingBlock.htm",
      controllerAs: "MainCTRL as ctrl",
    },
  }
});

父母包含未命名的视图＆＃39;＆＃39;使用模板：＆＃39; app / templates / multipleView.htm＆＃39;，其中包含我们的目标

<div ui-view="viewA"></div>
<div ui-view="viewB"></div>

此外，父州＆＃34;多＆＃34;使用绝对命名用其他视图填充这些目标：

    'viewA@multi': {
      template: "multi parent content",
    },
    'viewB@multi': {
      templateUrl: "testingBlock.htm",
      controllerAs: "MainCTRL as ctrl",
    },

然后，子状态只使用相对名称

注入这两个父目标

views: { 
    'viewA': {
      template: "multi child content",
    },
    'viewB': {
      templateUrl: "testingBlock.htm",
      controllerAs: "MainCTRL as ctrl",
    },
  }

在这里阅读更多内容

也是这样：

View Names - Relative vs. Absolute Names

在幕后，为每个视图分配一个遵循 viewname@statename 方案的绝对名称，其中viewname是视图指令中使用的名称，状态名称是状态＆＃39 ; s绝对名称，例如contact.item。您还可以选择以绝对语法编写视图名称。

如何设置嵌套路由与Angularjs加载一个包含其他视图的视图？

1 个答案: