Question

所以我创建了一大堆我想在许多项目中使用的指令，所以我把它变成了一个bower包并将它包含在我的一个项目中。不幸的是，指令不起作用，因为templateUrl路径不正确。

templateUrls基于与指令的js位于同一目录中的模板。所以＆＃34; ./ tabbedtextareas.html＆＃34;我解决这个问题的一些简单选择是什么？

我到目前为止所考虑的是：

将html复制并粘贴到JS文件中
- 之后编辑模板会很痛苦
使用grunt用JS编译模板，甚至可以创建一个钩子来提交，合并到master和push。
- 这是一个非常简单的插件，我更喜欢让事情尽可能简单。
将我的模板放在一个目录中，然后在每个项目中让我的服务器处理对该文件夹的请求。
- 任何需要我的指令作为凉亭依赖的人都需要知道这个具体的事情。 IE浏览器。只能通过bower安装来安装包。

是否可以添加bower安装脚本或其他内容？任何帮助表示赞赏。

Answer 1

我一直在寻找关于这个问题的指导/建议，并考虑了许多不同的选择。我以为我会分享我目前已经解决的问题。

N.B。正在使用这个方法的项目仍处于早期阶段，因此所描述的方法绝不是一成不变的。如果我将来必须改编/改变它，我不会感到惊讶。

背景上下文是一样的，我们在GitHub上有多个自包含指令，通过bower使用。每个组件模板都必须与指令内联，因为templateUrl路径不起作用。

我基本上是从上面做选项2，使用gulp，并使用gulp-angular-templatecache插件来利用角度模板缓存。

解决方案

`gulpfile.js`

做两件事，解析组件名称并将模板内容写入模板缓存（通过gulp插件）并将组件代码和标记连接成单个文件（进入dist/<component-name>.js。

var gulp = require('gulp'),
    templates = require('gulp-angular-templatecache'),
    concat = require('gulp-concat'),
    clean = require('gulp-clean'),
    pkg = require('./package.json');

var template = 'myTemplate.tpl.html'

gulp.task('templates', function () {
  return gulp.src(template)
    .pipe(templates('templates.tmp', {
      root: '/templates/',
      module: pkg.name
    }))
    .pipe(gulp.dest('.'));
});

gulp.task('concat', ['templates'], function () {
  return gulp.src([pkg.main, 'templates.tmp'])
    .pipe(concat(pkg.name + '.js'))
    .pipe(gulp.dest('./dist/'));
});

gulp.task('clean', ['concat'], function () {
  gulp.src('./*.tmp', {read: false})
    .pipe(clean());
});

gulp.task('watch', function () {
  gulp.watch(['*.js', '*.html'], ['build']);
});

gulp.task('build', ['templates', 'concat', 'clean']);
gulp.task('default', ['build', 'watch']);

输出

模板在模板缓存中设置，指令在设置$templateCache.get(key)属性时通过template检索。这提供了通过bower使用此组件所需的单个文件输出，同时允许您在源中的单独文件中维护标记。

angular.module('myModule', []).directive('myDirective', function ($templateCache) {

  return {
    template: $templateCache.get('/template/myTemplate.tpl.html');
    link: function (scope, elm, attr) {

    }
  };
});

angular.module("myModule").run(["$templateCache", function($templateCache) {$templateCache.put("/template/myTemplate.tpl.html","<div>This is the template for your component</div>");}]);

思想

在处理组件时有一个构建步骤的额外开销。鉴于这一要求，我认为没有办法完全避免这一步骤。如果在组件构建期间没有完成，则必须在实现时完成。鉴于这两个选项，我认为当范围狭窄且清晰时，最好在组件中进行。
我不相信我的gulp任务是完全最优的。存在一定程度的同步性，这与“gulp方式”相反。可能会花一些时间/精力来弄清楚如何改进它。

Answer 2

我使用grunt-angular-templates＆＃34; Grunt构建任务来连接＆amp;在$ templateCache＆＃34;

中注册AngularJS模板

// within my Gruntfile.js
grunt.initConfig({
  ngtemplates: {
    'angular-my-directives': {
      src:      'views/**/*.html',
      dest:     'template.js'
    }
  }
  // ...
});

生成类似：./template.js

的内容

angular.module('angular-my-directives').run(['$templateCache', function($templateCache) {

  $templateCache.put('views/directives/my-download.html',
    "<form name=\"myDownloadForm\" ng-submit=\"submit()\" novalidate>\n" +
    "</form>"
  );

}]);

现在在我的指令中，我可以简单地使用templateUrl: 'views/directives/my-download.html'，它将使用$ templateCache。

最后，我使用grunt-contrib-concat来合并我的文件以便于加载。

如何在angular指令凉亭包中使用单独的模板？

2 个答案:

解决方案

`gulpfile.js`

输出

思想