具有嵌套视图的多个视图答案

【问题标题】：Multiple Views with nested views Angular具有嵌套视图的多个视图
【发布时间】：2015-09-11 00:48:09
【问题描述】：

首先，我正在为一个工作项目做这个，但我们都不知道怎么做，所以可能有点模糊。

这是外观的模板：Template

因此，视图 A 和 B 将有 3 个状态，这些状态将根据选择的状态更改视图的内容

我遇到的问题是只显示了 1 个视图，现在它是一个测试模板，因为我没有构建这些视图，但视图 A 的子视图都没有显示。 HTML

<div id="main">
    <div ui-view="viewa" class="col-sm-7">
        <!--Content of ViewA supposed to be here-->
    </div>
    <div ui-view="viewb" class="col-sm-5">
        <!--Content of ViewB supposed to be here-->
    </div>
</div>

州：

$stateProvider.state("main", {
    url: "/main",
    views: {
        "viewa@": {
            abstract: true,
            template: "<div ui-view></div>"
        },
        "viewb@": {
            templateUrl: "btemps/default.html"
        }
    }
}).state("bobtheView", {
    parent: "viewa",
    //This is default for viewa
    url: "/",
    templateUrl: "atemps/bob.html",
    controller: "bobController"
}).state("billtheview", {
    parent: "viewa",
    url: "/bill",
    templateUrl: "atemps/bill.html",
    controller: "billController"
}).state("joetheview", {
    parent: "viewa",
    url: "/joe",
    templateUrl: "atemps/joe.html",
    controller: "joeController"
});
//Supposed to route to viewa showing bobtheview and viewb showing the template
$urlRouterProvider.otherwise("/main/");

因此，当我转到页面并转到根目录时，它会重定向到其他页面，但什么也没有显示，在进入主页面时，只显示 viewb 模板。

有什么想法吗？有什么办法可以更好地格式化它吗？使用“viewa.bobtheview”比混合使用父属性更好吗？

更新： 所以我找到了一个解决方法，我在 html 部分中加载了 bobtheview、joetheview 和 billtheview 中的每一个，然后我对其进行了重构，以便 viewa 和 viewb 的视图状态在主包含“ng-include”函数以加载不同模板的模板，并且由于存储在这些视图中的所有数据都是通过 JSON 休息请求提供的，因此数据绑定没有变化。我现在面临的问题是在单击按钮时更新“ng-include”，我还没有对它进行过广泛的研究，但我计划这样做，我会在/如果我发现什么时报告。如果您对此有任何想法，请告诉我！ :D。

【问题讨论】：

我在这里可能是错的，但通常你会做一个状态摘要，而不是其中的一个视图。这意味着它不能直接实例化。我想这就是为什么当你去 main 时你没有真正看到任何东西的原因。如果它是抽象的，你不能，你必须去找它的一个孩子。
我删除了抽象标签，并将其直接重定向到一个孩子，但仍然只显示带有模板的 viewb 面板，viewa 显示其中的模板（
) 但默认子视图 (bobtheview) 没有加载到其中，也没有加载任何其他子节点，当定向到他们的特定 URL 时，我已经尝试了各种不同组合的 URL 到子视图，但是唉，什么都没有发生。
所以我不知道你的设计是否需要有一个抽象视图，但我只是定义了每个状态下的视图和控制器（因为它们在每个状态中都会发生变化）并且它可以工作伟大的。使用视图做到这一点： { "viewa": {template....., controller...}, "viewb": {template....., controller...} }
我认为您需要一个名为 viewa 的状态才能使用 parent: 'viewa'？
我会试一试，一切都处于“主要”状态，只使用一堆嵌套视图，我会根据我的结果进行报告，但我有一种感觉如果我在其中执行相同的操作，viewb 面板将不会显示任何内容，因为最终它们（viewa 和 viewb）将具有相同的行为，其中每个视图中的独立嵌套视图都可以通过使用 ng-click 的按钮按下而改变

标签： javascript asp.net angularjs angular-ui-router

【解决方案1】：

所以我找到了手头问题的可行答案，经过广泛的研究和四处询问，我选择了拥有 1 个控制器和配置状态

$stateProvider.state("main", {
    url: "/",
    controller: "mainController",
    templateUrl: "temps/primary.html"
});
$urlRouterProvider.otherwise("/");

进入配置设置，然后我的控制器看起来有点像这样：

app.controller("mainController", ["$scope", "$state", "$stateParams", "$http", function($scope, $state, $stateParams, $http) {
     $scope.viewatemp = $stateParams.at; //Numeric value to represent template url for viewa
     $scope.viewbtemp = $stateParams.bt; //Numeric value to represent template url for viewb
     //Do some other stuff here
});

然后“temps/primary.html”的 HTML 看起来有点像这样：

<div ui-view="viewa" class="col-sm-5" ng-include="viewatemp"></div>
<div ui-view="viewb" class="col-sm-7" ng-include="viewbtemp"></div>

我对 viewatemp 和 viewbtemp 的数值进行了一些操作以获取实际 URL，这些是从我的 ASP.net WebApi 2 Restful 服务的 JSON 请求中加载的，但总而言之，它很快，而不是简单，仍然可以完成工作，并允许进一步扩大项目。

这解决了我的问题，这很酷，我可以拥有尽可能多的这些，因为它们都是具有嵌套“视图”的独立状态

如果你有更好的答案，请告诉我！这只是我发现的和对我有用的。

【讨论】：