Angular指令的Jade模板
在我的MEAN应用程序中，我使用玉石作为模板引擎。 我的问题是，当我调用一个angular度指令，玉代码不工作，但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>
我怎么解决这个问题？
Jade是一个模板引擎。 浏览器只有内置的htmlparsing器，所以不知道jade代码是什么意思，把它当成纯文本。
要使其工作，你需要将其转换为HTML。 你可以使用一些任务pipe理器来做到这一点。 两个最stream行的node.js任务pipe理器是gulp和grunt。 他们每个人都有一个工作玉插件，你可以立即使用。
翡翠是less了一些 – 它必须转换为另一种格式，因为浏览器不能理解。 当你less用，你必须将其转换为CSS。 如果你使用玉 – 到HTML。 如果你使用grunt，你应该看看它： https : //github.com/gruntjs/grunt-contrib-jade否则，你可以检查你的IDE是否可以把jade转换成html。 例如PhpStorm可以以自动的方式做到这一点。
然后在你的指令中，你应该指定html模板的path，而不是玉。
您可以使用以下目录结构：
app/ src/ js/ less/ jade/ dist/ templates/ <-- here you can put your htmls styles/ <-- and here put css js/ <-- if you want, you can put this minimalized app.js that will contain all of your project, see grunt-contrib-uglify for more info
编辑：这里是真正伟大的文章关于咕噜声： http : //anthonydel.com/my-personal-gruntfile-for-front-end-experiments/还有更多，那么你需要，但也许它会帮助你
….或者你可以使用webpack来完成这项工作。
那么你可以像这样加载模板：
angular.module('app').component('myComponent', { bindings: {}, template: require('./mytemplate.jade')() });
你可以注意到我正在调用返回的函数。
另一个select是将HTML模板保存在DOM中，但隐藏起来：
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
然后使用jQuery从DOM中取出HTML，并将其赋给angular：
formDir.directive('adminCollection', function() { return { restrict: 'E', transclude: true, // fetch template from DOM template: $('#adminCollectionTemplate').html() }; });
这只会工作，没有任何Ajax或任何跑步者。 但是它会把模糊的DOM弄乱，否则这些模板可能会隐藏在JS中。 这是将每个新模板放入该div的额外步骤。
ng-non-bindable需要告诉Angular离开模板元素（不要操作它们或绑定到它们），直到它们的克隆被指令实际使用。