2014-11-05 72 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' 
    }; 
});