角度子视图答案

【问题标题】：Angular sub-views角度子视图
【发布时间】：2014-10-11 07:39:49
【问题描述】：

我在谷歌上搜索了一些关于这个主题的信息，但我无法得到关于这个主题的明确答案，所以如果这似乎是一个非常失败的问题，我深表歉意。不久前我开始使用 Angular，我真的很想走上好的道路。

应用程序由app.js 引导，它定义了配置中的路由。 index.html 有一个带有 ng-app 指令的主体，内部只有一个带有 ng-view 的 div。

  $routeProvider
    .when('/', {
      templateUrl: 'views/main.html',
      controller: 'MainController'
    })
    .otherwise({
      redirectTo: '/'
    });

main.html 和控制器是应用程序的主体，非常简单。

现在我想要一个标题，它要么显示登录名，要么显示来自用户的信息。我认为那应该是另一个控制器和另一个视图，因为标题应该封装所有代码而不是污染主视图。

我该怎么办？

我可以删除 ng-app 并为标题和主应用程序创建两个不同的控制器，但是我不知道如何将每个视图关联到每个 ng-controller 就像 routeProvider 正在做的那样，虽然如果我不介意写所有的 html 内联，这应该工作。我也会失去我并不真正想要的路由。
我可以在应用程序内创建一个ng-controller=headerController 并且仍然有内联代码。是否可以选择将模板与没有路由定义的控制器关联？

在我有更好的选择之前，我目前要做的是将所有这些逻辑添加到 mainController。我只是觉得我正在构建大块而不是我可以组成的小块。想象一下，我又做了三个需要标题的路线。使用选项 1) 或 2) 我将不得不在这些视图中再次为标题编写模板 html。

我将不胜感激任何链接或帮助，我真的很好奇如何以模块方式处理这个问题。

提前谢谢你。

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

我可以删除 ng-app 并为标题和主应用程序创建两个不同的控制器，但是我不知道如何将每个视图关联到每个 ng-controller 就像 routeProvider 正在做的那样，尽管如果我不这样做不介意写所有的 html 内联，这应该工作。我也会失去我并不真正想要的路由。

您只需编写两个不同的模块，它们具有相同的routeConfig，事情可能会奏效。但是，我认为这不是这种情况下的最佳解决方案。

回答你的第二个问题：

我可以在应用程序中创建一个ng-controller=headerController 并且仍然有内联代码。是否可以选择将模板与没有路由定义的控制器相关联？

您可以使用ng-include 来包含模板：

<body ng-app="MyApp">
    <section ng-include="'header.html'" ng-controller="HeaderController"></section>
    <ng-view></ng-view>
</body>

此外，您可以使用$templateCache 或<script> tag 保持模板内联。

【讨论】：

谢谢。这似乎正是我所需要的，这是为此目的而构建的 hack 或 ng-include 吗？一旦我测试它，我很乐意接受它作为正确答案（已经 +1）。
ng-include 是插入部分的一般方法。 ng-view 确实是有限的，因为它只能绑定一次，并且通常通过以这种方式使用 ng-include 来解决。如果您需要根据路线切换视图，您也可以查看ui-route，但由于它是pre-beta，因此您不应该在生产代码中使用它。
很多人讲ui-route，github上很多star。如果我需要更好的东西，我会采用你的方法并回退到 ui-route。对于标题内的更改，我将使用 angular 的 if 指令，例如区分登录用户和注销用户。谢谢，接受答案。

【解决方案2】：

您可以使用 ng-include 插入模板。我个人喜欢用ui-router

【讨论】：