带有嵌套视图的多个视图

Question

因此，首先，我正在为一个工作中的项目进行此工作，但是我们每个人都不知道如何执行此操作，因此可能有点含糊。

这是它的外观模板 ： 模板

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

我遇到的问题是，只有一个视图曾经显示过，并且它现在是一个测试模板，因为我没有构建那些视图，但是视图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/");

因此，当我转到页面并转到根目录时，它会重定向到其他地方，但没有任何显示，仅在进入main时，仅显示了viewb模板。

有任何想法吗？ 有什么办法可以改善它的格式吗？ 与“ viewa.bobtheview”一起使用是否比在混合中具有parent属性更好？

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

Answer 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请求中加载的，但总而言之，它是快速，相当简单且仍然完成工作并允许进一步扩大项目。

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

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