Jade中的Angular ng-include

Question

我正在尝试在我的Jade模板中使用Angular的ng-include来包含一个标题：

：

doctype html
html(lang="en")
    head
        meta(charset='UTF-8')
        meta(name='fragment', content='!')
        base(href='/')
        title Node Express Angular
        link(rel='stylesheet', href='//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css')
        link(rel='stylesheet', href='/css/syle.css')
    body(ng-app='myApp')
        ng-include(src='\'/partials/header.jade\'')
        div.container
            div.jumbotron.text-center
                h1 Home Page
                p This page is a draft in progress
        script(src='//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.15/angular.min.js')
        script(src='//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js')
        script(src='/js/app.js')

The text in header.jade is the following:

nav.navbar.navbar-inverse(role='navigation')
ul.nav.navbar-nav.navbar-header
    li
        a(src='/home', class='navbar-brand') Home
    li
        a(src='/about') About
    li
        a(src='/login') Login
    li
        a(src='/register') Register

我尝试了ng-include(src='\'/partials/header.jade\'')和div(ng-include='\'/partials/header.jade\'')

在Chrome开发者控制台中，第一个结果为<!--ng-Include: undefined -->，第二个结果为：<!-- ng-Include: '/partials/header.jade' -->

有什么线索吗？

- Bondifrench

Answer 1

你为什么要使用Angular的ng-include而不是Jade自带的包含机制？

body(ng-app='myApp')
    include partials/header

以下是Jade文档中有关包含（include）的内容：

- MJV

---

谢谢，这个可行。不，除了尝试结合Jade和Angular之外，没有特别的原因。不太容易理解应该由什么来处理。 - Bondifrench

好的，太棒了。这就是我们在我的当前项目中包含部分文件的方式，我只是想知道这是否缺少您需要的内容。（现在看来，“有特定原因吗”这句话有点粗糙...） - MJV

没问题，Jade或Angular都可以做很多事情，我正在努力区分哪些是最适合每个目的的。 - Bondifrench

我喜欢这个解决方案，因为它避免了在使用 ng-include 时遇到的作用域问题。 - Jason Swett

我认为当要包含的部分是静态内容且不包含Angular逻辑时，这也更符合惯用语。 - MJV

Answer 2

我是一位有益的助手，可以为您进行文本翻译。以下是需要翻译的内容：

我创建了一个Angular指令，由JADE渲染，然后由Angular编译到给定的作用域中......它正常运行！

顺便说一下，我正在使用面向浏览器的客户端Jade，该CDN可在这里找到。

例如：

html:

<ng-include src="'MyPageWithJadeScript.html'"></ng-include>

MyPageWithJadeScript.html:

<jade>tag#id.class jade text</jade>

Angular：

app
.directive('jade',function($compile){
return{
    transclude: true,
    template: '<div ng-transclude></div>',
    restrict: 'E',
    link: function(scope, element){
      element
        .after(
          $compile(
            jade
            .render(
                element.html(),
                {pretty:'\t'}
            )
          )(scope)
        )
        .remove();
    }
};
});

希望你觉得这个有用。

- Youssef Gamil

Answer 3

使用Express框架，我在views/文件夹中有一个名为user-description.jade的文件。要在另一个jade文件中包含它，我只需使用以下表达式：

div
  include user-description.jade

Jade 文档 中还有其他的示例。

- TMS

Answer 4

请参考官方文档 ngInclude，使用以下代码

div(ng-include="'partials/header.jade'")

如果您想直接使用ngInclude指令，请使用：

ng-include(src="'partials/header.jade'")

- jackypan1989

---

我已经尝试了两种方法，但都无法呈现我的文件header.jade的内容。在此之前，我确保我的jade文件的内容是有效的。 - Bondifrench

如何移除 base(href='/')？ - jackypan1989

你检查过你的模板引擎了吗？也许你可以尝试使用 div(ng-include="'partials/header.html'")。 - jackypan1989

我已经尝试过了，我创建了一个header.html文件，并且显然将其从jade转换为html。但是也没有起作用。 - Bondifrench