Угловой нг-джейд в нефрите.

Question

Я пытаюсь включить заголовок, используя ng-include из Angular в мой шаблон 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 первая приводит к <!--ng-Include: undefined --> а второй: <!-- ng-Include: '/partials/header.jade' -->

Есть какие-нибудь подсказки?

Answer 1

Есть ли конкретная причина, по которой вы используете Angular ng-include вместо собственного механизма включения Джейд?

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

Справочник из нефритовой документации.

Answer 2

Я создал директиву Angular, которая будет отрисована JADE, а затем скомпилирована Angular в заданную область... и это работает!

Кстати, я использую Jade на стороне клиента для браузеров, CDN доступен здесь

например:

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

Надеюсь, вы найдете это полезным

Answer 3

Обратитесь к официальному документу ngInclude, используя код ниже

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

Если вы хотите использовать директиву ngInclude напрямую, используйте

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

Answer 4

Используя экспресс, у меня есть файл user-description.jade внутри views/ папки, и чтобы включить его в другой файл Jade, я просто использую следующее выражение:

div
  include user-description.jade

У Jade Docs есть и другие образцы.