angularjs - Angular 指令的 Jade 模板

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中使用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代码::

<h1> from _adminCollection templateUrl </h1>

如何解决这个问题？

Answer 1

Jade 是一个模板引擎。浏览器只有内置的html解析器，因此它无法理解jade代码的含义，并将其视为明文。

要使其正常工作，您需要将其转换为 html。您可以使用一些任务管理器来完成此操作。 Node.js 中两个最流行的任务管理器是 gulp 和 grunt。他们每个人都有一个可用的 jade 插件，您可以立即使用。