AngularJs (1.X) 包含部分模板答案

【问题标题】：AngularJs (1.X) Include Partial TemplateAngularJs (1.X) 包含部分模板
【发布时间】：2014-04-15 07:17:10
【问题描述】：

我的主布局文件中有这个

<body>
    <header id="header" ng-controller="HeaderController"></header>
    <div class="container" ng-view></div>

我的目录结构中有一个 header.html 部分模板。

如何在我的应用中包含此模板？我以为 Angular 在处理完控制器后会自动包含模板，但它不起作用。

头节点应替换为该文件的内容。

【问题讨论】：

你能提供更多你的代码吗？例如控制器...
嘿，当然。但是这些控制器是空的。我已经把它贴在这里了：pastebin.com/89EzgzSH

标签： angularjs templates include partial

【解决方案1】：

从外部文件中包含模板/html 片段的一种方法是使用 ng-include 指令 (doc)。

<ng-include src="'/path/to/the/header.html'"></ng-include>

或

<div ng-include src="'/path/to/the/header.html'"></div>

【讨论】：

嘿，谢谢。这行得通！但这解决了另一个问题。我在这些模板中有一个图像标签，如果我用 ng-include 包含模板，图像将不再加载。我确定，图片路径是正确的。
奇怪，还没有遇到那个..使用ng-src属性引用您的图像是安全的，看看是否有帮助
div 语法错误，应该是这样的：<div ng-include="/path/to/header.html"></div>
刚刚发布了一个编辑，但我会在这里再说一遍。确保将字符串常量用单引号括起来，如下所示："'/path/to/header.html'"
单引号很重要。否则它不起作用。我以为我做错了并删除了单引号，它停止了工作。所以你应该使用：<div ng-include src="'template.html'"></div>.

【解决方案2】：

从Angular 2，ngInclude 一直是removed，并且首选自定义指令。这就是我想出的方法

为您的应用定义主要组件，该组件链接到母版页

    @View({
        templateUrl:   'client/app/layout/main.html',
        directives: [ROUTER_DIRECTIVES, Navigation, Footer]
    })
    @Component({selector: 'app'})
    @RouteConfig(
        routerConfig
    )
    class MainComponent {
    }

这是主要的模板

<!---- Navigation bar ---->
<navigation></navigation>
<!----/ Navigation bar ---->

<!---- Main Part ---->
<router-outlet>
</router-outlet>
<!----/ Main Part ---->

<!---- Footer ---->
<footer></footer>
<!----/ Footer ---->

定义一个base.html，它将包含body标签和app标签

<body> <app>Loading ...</app> </body>

现在，最后一步是定义 Navigation 和 Footer 的组件，例如指向您的部分模板的 MainComponent

【讨论】：

用 Angular2 有没有办法在你的 index.html 中使用不可见的 div 作为模板，例如？
我也有同样的问题。但也需要它用于角度 1
我们需要关于 angularjs 的答案，而不是 angular 2+。