Question

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

以下是它的外观模板：Template

所以查看A＆amp; B将在其中具有3个状态，这些状态将根据选择的视图来改变视图的内容

我遇到的问题是只有1个视图出现过，现在它是一个测试模板，因为我没有构建这些视图但是View 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属性更好吗？

更新：所以我找到了一个解决方法，我在html partials中加载了每个bobtheview，joetheview和billtheview，然后我重构了它，因此viewa和viewb的视图状态在一个main中被控制包含“ng-include”函数的模板，用于加载不同的模板，并且由于存储在这些视图中的所有数据都是通过JSON休止请求给出的，因此数据绑定没有变化。我现在面临的问题是，在点击按钮时更新“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
});

然后是＆＃34; temps / primary.html＆＃34;的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请求加载的，但总而言之，它很快，而不是简单而且仍然可以完成工作，并允许进一步扩大项目。

在那里解决了我的问题，很酷的事情，我可以拥有尽可能多的这些，因为他们都是独立的状态与嵌套＆＃34;视图＆＃34;

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

具有嵌套视图的多个视图Angular

1 个答案: