Jade 中的 Angular ng-include。答案

【问题标题】：Angular ng-include in Jade.Jade 中的 Angular ng-include。
【发布时间】：2014-06-29 11:55:46
【问题描述】：

我正在尝试在我的 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')

header.jade 中的文字如下：

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 开发者控制台中，第一个结果为 ，第二个结果为：

有什么线索吗？

【问题讨论】：

标签： angularjs express pug angularjs-ng-include

【解决方案1】：

使用 express，我在 views/ 文件夹中有文件 user-description.jade 并将其包含在另一个 Jade 文件中，我简单地使用以下表达式：

div
  include user-description.jade

Jade docs 有其他样本。

【讨论】：

【解决方案2】：

我创建了一个由 JADE 渲染的 Angular 指令，然后由 Angular 编译到给定的范围内......它可以工作！

顺便说一句，我正在使用客户端 Jade 浏览器，CDN 可用 here

例如：

html:

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

MyPageWithJadeScript.html：

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

角度：

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();
    }
};
});

希望你觉得这很有用

【讨论】：

【解决方案3】：

您使用 Angular 的 ng-include 而不是 Jade 自己的包含机制是否有特定的原因？

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

参考表格Jade docs。

【讨论】：

谢谢，这行得通。不，除了尝试将 Jade 和 Angular 结合起来之外，没有任何具体原因。不是很直截了当应该处理什么。
好的，太好了。这就是我们在我当前的项目中包含部分内容的方式，我只是想知道这是否缺少您所追求的东西。（“有什么特殊原因吗”现在我自己的眼睛看起来有点粗糙......）
不用担心，Jade 或 Angular 都可以做很多事情，我正在努力区分哪些最适合每种用途。
我喜欢这个解决方案，因为它绕过了您在使用 ng-include 时遇到的范围问题。
我认为当要包含的部分是静态内容并且不包含 Angular 逻辑时，它也更惯用。

【解决方案4】：

参考官方文档ngInclude，使用下面的代码

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

如果要直接使用 ngInclude 指令，请使用

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

【讨论】：

我都试过了，都没有渲染我的文件 header.jade 的内容。我事先确实检查了我的翡翠文件的内容是否有效。
删除base(href='/') 怎么样？
你检查过你的模板引擎了吗？也许你可以试试div(ng-include="'partials/header.html'")
我已经尝试过了，我创建了一个header.html，并且显然将它从jade转换为html。也没有用。