多个视图与角嵌套视图 [英] Multiple Views with nested views Angular

问题描述

所以第一关，我正在为这项工作的一个项目，但是没有人有任何想法如何做到这一点，所以它可能是一种模糊的。

So first off, I'm working on this for a project at work, but none of us have any idea how to do it, so it might be kind of vague.

下面是它是如何去看看的模板：模板

Here is the template of how it is going to look: Template

所以查看急症室; B的将有3种状态中它们将根据被选择哪一个上改变视图的内容

So View A & B are going to have 3 states in them that will change the content of the view based on which one is selected

我遇到的问题是，只有1视图不断显示出来，这是一个测试模板，因为我没有建这些意见，但没有观A的部分观点不断出现。
HTML

The problem I'm having is that only 1 view ever shows up and it is a test template for now because I don't have those views built but none of the sub views of View A ever show up. 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模板显示出来。

So when I go to the page and go to the root it redirects to the otherwise but nothing shows up, upon just going to main, only the viewb template shows up.

任何想法？什么办法可以格式化更好呢？它是更好地去viewa.bobtheview过在混合具有父属性？

Any ideas? Any way I can format it better too? Is it better to go with "viewa.bobtheview" over having the parent attribute in the mix?

更新：所以，我发现周围的工作，我装每个bobtheview，joetheview和billtheview在HTML谐音，那么我重构这么viewa的视图状态和viewb都内的主要控制模板包括了NG-包括函数加载不同的模板，并且由于所有存储在这些视图中通过JSON其余请求被赋予的数据，有在数据绑定没有变​​化。我现在面临的问题，正在更新的NG-包括按钮的点击，我没有做过广泛的研究，但我打算这样做，我会报到当/如果我找到的东西。如果您对此有什么想法让我知道！ 。：D

UPDATE: So I found a work around, I loaded each of the bobtheview, joetheview and billtheview in html partials, then I refactored it so the view state of viewa and viewb are controlled within a main template that includes the "ng-include" function to load the different templates, and since all of the data that is stored in those views is given via JSON rest requests, there is no change in the data bindings. The problem I'm facing now, is updating that "ng-include" on button click, I haven't done extensive research on it but I plan on doing so and I'll report back when/if I find something. If you have any ideas on this let me know! :D.

推荐答案

所以我找到一个可行的解决手头的问题，广泛的研究，并询问了有关情况后，我有1控制器和配置状态<的选择了/ p>

So I found a viable answer to the question at hand, after extensive research and asking around, I went with the option of having 1 Controller and configuration state

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

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

That went into the configuration settings, then my controller looked a little like this:

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

那么，临时工/ primary.html的HTML看起来有点像这样：

Then the HTML of "temps/primary.html" looked a little something like this:

<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请求加载，但总的来说，它是快速的，而简单，仍然能够完成任务，并允许对项目的进一步扩大。

I did a little manipulation of the numeric value of viewatemp and viewbtemp to get the actual URL, those are being loaded from a JSON request from my ASP.net WebApi 2 Restful service, but all in all, it is quick, rather simple and still gets the job done and allows for further enlargement of the project.

和存在于解决我的问题，关于这个很酷的事情，我可以有多达这些，因为我想，因为他们都是独立的国家嵌套意见

And that there in solved my problem, cool thing about this, I can have as many as these as I want because they are all separate states with nested "views"

如果你有一个更好的答案，让我知道！这仅仅是我发现了什么，什么适合我。

If you do have a better answer, let me know! This is only what I found and what worked for me.

这篇关于多个视图与角嵌套视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！