嵌套视图的多视图Angular

所以首先，我正在为这个项目工作，但我们没有人知道如何去做，所以它可能有点模糊。嵌套视图的多视图Angular

这里是怎么样看的模板：Template

所以看一个& 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: { 
     "[email protected]": { 
      abstract: true, 
      template: "<div ui-view></div>" 
     }, 
     "[email protected]": { 
      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”而不是在组合中使用父属性会更好吗？

UPDATE：所以，我发现周围的工作，我装每个bobtheview，joetheview和billtheview的HTML泛音，然后我重构这么viewa的视图状态和viewb都包含一个主模板内控制“ng-include”函数可以加载不同的模板，并且由于存储在这些视图中的所有数据都是通过JSON rest请求提供的，所以数据绑定没有变化。我现在面临的问题是更新“ng-include”按钮单击，我没有做过广泛的研究，但我打算这么做，并且我会在什么时候/如果发现什么东西时报告。如果您对此有任何意见，请告诉我！：d。

来源

2015-06-24 ConstantRefractoringOfThings

我可能在这里是错的，但通常你做一个状态摘要，而不是它的视图。这意味着它不能直接实例化。我想这就是为什么当你去主要时你没有看到任何东西。如果它是抽象的你不能，你必须去其中一个孩子。 – Scott

我删除了抽象标签，并将其直接重定向到一个孩子，并且仍然只有带模板的viewb面板出现，viewa显示其内部的模板（

），但默认的孩子（bobtheview）不是加载到它，也没有任何其他孩子时，直接针对他们的具体url，我已经尝试了所有不同的组合方式为urls儿童的意见，但唉，没有什么来的。 – ConstantRefractoringOfThings

所以我不知道你的设计是否需要抽象视图，但我只是在每个状态下定义视图和控制器（因为它们在每个状态中都有变化），并且它很好用。使用视图：{“viewa”：{template .....，controller ...}，“viewb”：{template .....，controller ...}} – Scott

所以我找到一个可行的解决手头的问题，经过广泛的调研和询问的时候，我被具有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 
});

然后“临时工/ 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，这些URL是从我的ASP.net WebApi 2 Restful服务的JSON请求中加载的，但总而言之，它很快，相当简单，仍然可以完成工作并允许进一步扩大项目。

而且有在解决我的问题，关于这个很酷的事情，我可以有多达这些，因为我想，因为它们与嵌套的“意见”

所有独立的国家。如果你有一个更好的答案，让我知道！这只是我找到的和对我有用的东西。

来源

2015-06-26 13:31:22 ConstantRefractoringOfThings

嵌套视图的多视图Angular

回答

相关问题