Question

在我的 MEAN 应用中，我使用 jade 作为我的模板引擎。我的问题是，当我调用angular指令时，jade代码不起作用但html代码正常工作。我的代码如下：

index.jade

div(ng-repeat="num in addDir")
  admin-collection

directive.js

var formDir = angular.module("formDirective", []);

formDir.directive('adminCollection', function()  {
    return {
       restrict: 'E',
       transclude: true,    
       // call jade template url   
       templateUrl: '../_template/_formTemplate/_adminCollection.jade'
    };
});

_adminCollection.jade

h1 from _adminCollection templateUrl

如果我在 _adminCollection.jade 中使用玉格式代码，它只显示纯文本，而不是 h1 标记内的文字

但是以下代码正在运行：

directive.js

var formDir = angular.module("formDirective", []);

formDir.directive('adminCollection', function()  {
    return {
       restrict: 'E',
       transclude: true,    
       // call jade template url   
       templateUrl: '../_template/_formTemplate/_adminCollection.html'
    };
});

_adminCollection.html code ::

<h1> from _adminCollection templateUrl </h1>

我该如何解决这个问题？

Answer 1

Jade更少 - 它必须转换为另一种格式，因为浏览器无法理解。当你使用less时，你必须将它转换为css。如果你使用玉 - 到HTML。如果您使用grunt，您应该查看它：https://github.com/gruntjs/grunt-contrib-jade 否则，您可以检查您的IDE是否可以将jade转换为html。例如，PhpStorm可以自动方式执行此操作。

然后在你的指令中你应该指定html模板的路径，没有jade。

您可以使用以下目录结构：

do_action( 'groups_custom_create_steps' );

编辑：这里有关于咕噜的非常好的文章：http://anthonydel.com/my-personal-gruntfile-for-front-end-experiments/还有更多你需要的东西，但也许它会帮助你

Answer 2

....或者您可以使用webpack来完成工作。

然后您可以像这样加载模板：

angular.module('app').component('myComponent', {
  bindings: {},
  template: require('./mytemplate.jade')()
});

你可以注意到我正在调用返回的函数。

Answer 3

另一种选择是将HTML模板保留在DOM中，但隐藏：

auto_now

然后使用jQuery从DOM中获取HTML，并将其赋予角度：

div(ng-non-bindable, style="display: none")

  #adminCollectionTemplate
    div(ng-repeat="num in addDir")
      admin-collection

  #anotherTemplate
    //- Alternatively, pull in the template from another file
    include ./_formTemplate/_adminCollection.jade

这只会工作，没有任何Ajax或任何任务运行者。但它会使用模板混淆DOM，否则这些模板会隐藏在JS中。将每个新模板放入该div中是一个额外的步骤。

formDir.directive('adminCollection', function() { return { restrict: 'E', transclude: true, // fetch template from DOM template: $('#adminCollectionTemplate').html() }; });需要告诉Angular单独保留模板元素（不要操纵它们或绑定它们），直到它们的克隆实际被指令使用。

Angular指令的{Jade模板

3 个答案: