2014-11-05 120 views
2

我正在通過將它們放入單獨的組件中來爲我的角度應用程序製作一些可重用的指令。在角度組件中包含html模板

我想使用templateUrl作爲指令,這樣我就不必在這篇文章中做三個選項之一:How do I use separate templates with my angular directive bower package?下面是對這些建議的amoderate解釋:1複製和過去html到js文件,2使用grunt將模板編譯爲js,或者3將模板放在不同的目錄中並讓服務器處理請求,這樣指令就不能被bower安裝使用。

有沒有更好的方式來使用組件中的指令的模板文件,或者是沒有設置爲以這種方式工作的涼亭?

+0

所以,你必須要包括在其他項目中的組成部分。此組件包含使用相對URL的模板? – 2014-11-05 01:31:10

+0

不,我真的只是想找到在組件中包含模板文件的最佳方法。我可以修改我的問題,以便更清楚。 – RuntimeBlairror 2014-11-05 03:04:23

+0

我想我正面臨着這個確切的問題 - 你有沒有解決它? – egeland 2015-12-22 00:14:47

回答

0

我確實解決了這個問題。我很抱歉沒有提前發佈答案。

我結束了使用grunt-angular-templates

如果使用的是一飲而盡,有可能是一個比較的庫。

這是我的目錄結構,用我的模板目錄中

project 
src 
    controllers 
    directives 
    templates 

HTML和我這是怎麼配置我的選項在我Gruntfile

grunt.initConfig({ 
... 
ngtemplates: { 
    projectName: { 
    cwd: 'src', 
    src: 'templates/**/*.html', 
    dest: 'src/templates/templates.js' 
    } 
} 

我有另外一個咕嚕任務grunt-contrib-concat來連接項目中的所有JavaScript文件。所以,模板被捆綁到最終的js文件中。

在代碼和測試中,您將能夠以相同的方式引用您的html文件,無論您是否加載html或javascript版本。

例:

angular.module('myModule') 
    .directive('myModuleDirective', function() { 
    return { 
     restrict: 'E', 
     templateUrl: 'templates/mainTemplate.html' 
    }; 
});