Question

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

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开发者控制台中，第一个产生，第二个产生

任何线索？

Answer 1

您是否有使用Angular的ng-include代替Jade自己的包含机制的具体原因？

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

参考表格Jade docs。

Answer 2

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

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

例如：

HTML：

$("#edit-member").css('display', 'block').animate({opacity: 1.0, left: edit_user_offset}, 1800);

MyPageWithJadeScript.html：

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

角：

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

希望你找到这个有用的

Answer 3

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

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

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

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

Answer 4

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

div
  include user-description.jade

Jade docs还有其他样本。

Angular ng-include in Jade。

4 个答案: