AngularJs (1.X) 包含部分模板
Posted
技术标签:
【中文标题】AngularJs (1.X) 包含部分模板【英文标题】：AngularJs (1.X) Include Partial Template 【发布时间】：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 【参考方案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+。以上是关于AngularJs (1.X) 包含部分模板的主要内容，如果未能解决你的问题，请参考以下文章