AngularJs包含部分模板

use*_*716 53 templates include partial angularjs

我在我的主布局文件中有这个

<body>
    <header id="header" ng-controller="HeaderController"></header>
    <div class="container" ng-view></div>
Run Code Online (Sandbox Code Playgroud)

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

如何在我的应用中包含此模板?我认为angular在处理控制器后自动包含模板,但它不起作用.

标题节点应替换为此文件的内容.

Suv*_*jah 91

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

<ng-include src="'/path/to/the/header.html'"></ng-include>
Run Code Online (Sandbox Code Playgroud)

要么

<div ng-include src="'/path/to/the/header.html'"></div>
Run Code Online (Sandbox Code Playgroud)

  • 刚刚发布了一个编辑,但我会在这里再说一遍.确保将字符串常量用单引号括起来,如下所示:``'/ path/to/header.html'"` (17认同)
  • 嘿,谢谢.这有效!但这解决了另一个问题.我在这些模板中有一个图像标签,如果我用ng-include包含模板,图像就不会再加载了.我敢肯定,图像路径是正确的. (3认同)

Tha*_*ran 5

Angular 2,ngInclude已被删除,自定义指令是首选.这就是我提出的方式

  1. 定义应用程序的主要组件,链接到母版页

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

这是主要模板

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

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

<!---- Footer ---->
<footer></footer>
<!----/ Footer ---->
Run Code Online (Sandbox Code Playgroud)
  1. 定义a base.html,它将包含body标签和app标签

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

  1. 现在,最后一步是为MainComponent 定义组件,NavigationFooter指向您的部分模板

  • 使用Angular2例如,有没有办法在index.html中使用不可见的div作为模板? (2认同)