这是情况.我有一个指令,这取决于一个templateUrl.
该指令看起来像这样：
angular.module('foo')
.directive('bar',function(){
return {
restrict: 'E',replace: true,templateUrl: '/foo/bar.html',controller: 'fooController',require: '^ngModel',scope: {
onSuccess: '&'
}
};
});
该指令是我的一个应用程序的一部分,重要的是它是应用程序的一部分.但是,我也想在其他项目中使用相同的指令,目前我正在使用bower将存储库下拉到我的其他项目中.但是,由于templateUrl将不正确,此伪指令将会中断. Bower克隆了整个项目,模板的实际路径最好在我的另一个项目中需要：
/lib/public/foo/bar.html
其他人如何管理？
由于可维护性问题,我从来不喜欢使用模板字符串进行模板化.我非常快速地原型html,所以我选择一个grunt任务读取我的文件,并将它们处理成一个单一的
$templateCache js文件.
解
Grunt build task to concatenate & register your AngularJS templates in
the $templateCache
// within my Gruntfile.js
grunt.initConfig({
ngtemplates: {
'angular-my-directives': {
src: 'views/**/*.html',// where my view files are
dest: 'src/templates.js' // single file of $templateCache
}
}
// ...
});
生成如下所示的文件：./src/templates.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组合我的文件,以方便加载.
结帐“Grunt concat + uglify with sourcemaps”(或者在评论中留下更好的链接),了解如何将uglify(aka min)js文件连接到单个“dist”文件中.
如果在自己的定制凉鞋包上工作
确保将级联(又名内置)文件提交到包repo,以便您的包消费者可以简单地包含my-concat-package.js或my-concat-package.min.js
