我使用angular-foundation(http://pineconellc.github.io/angular-foundation/)利用angular指令来实现基础知识,如Modals,Tabs和其他前端服务。
我遇到的问题是所有的指令都已经预先填充了" templateUrl"我的服务器上不存在的属性。此外,因为这是由Bower管理的外部依赖项,所以我无法手动更新库。我从库中取出了以下指令:
angular.module('mm.foundation.tabs', [])
.directive('tabset', function() {
return {
restrict: 'EA',
transclude: true,
replace: true,
scope: {},
controller: 'TabsetController',
templateUrl: 'template/tabs/tabset.html',
link: function(scope, element, attrs) {
scope.vertical = angular.isDefined(attrs.vertical) ? scope.$parent.$eval(attrs.vertical) : false;
scope.justified = angular.isDefined(attrs.justified) ? scope.$parent.$eval(attrs.justified) : false;
scope.type = angular.isDefined(attrs.type) ? scope.$parent.$eval(attrs.type) : 'tabs';
}
};
})
从我的模块中声明对mm.foundation模块的依赖:
angular.module('foundationDemoApp', ['mm.foundation.tabs']).controller('TabsDemoCtrl', function ($scope) {
$scope.tabs = [
{ title:"Dynamic Title 1", content:"Dynamic content 1" },
{ title:"Dynamic Title 2", content:"Dynamic content 2" }
];
$scope.alertMe = function() {
setTimeout(function() {
alert("You've selected the alert tab!");
});
};
})
我目前正在使用Gulp和gulp-html2js捆绑我的模板。在github README上,他们提到了关于$ templateCache的自定义模板(https://github.com/pineconellc/angular-foundation),但此时我不知道如何将库中定义的templateUrl更改为我模板的位置。
非常感谢任何关于此的指导!
答案 0 :(得分:1)
由于没有人回答,我会试一试,它可以帮助你,ossys(注意任何主持人,如果我错了,请随时删除我的答案)。
如果您bower install
对该库进行了编辑,那么这些模板应该位于bower_components/angular-foundation
中的某个位置,您应该按照他们的示例https://github.com/pineconellc/angular-foundation#customize-templates获取类似内容:
html2js: {
options: {
base: '.',
module: 'ui-templates',
rename: function (modulePath) {
var moduleName = modulePath.replace('bower_components/angular-foundation', '').replace('.html', '');
return 'template' + '/' + moduleName + '.html';
}
},
main: {
src: ['bower_components/angular-foundation/**/*.html'],
dest: '.tmp/ui-templates.js'
}
}
//or in gulp
gulp.src('bower_components/angular-foundation/**/*.html')
.pipe(html2js({
outputModuleName: 'ui-templates'
}))
.pipe(concat('ui-templates.js'))
.pipe(gulp.dest('./'))
答案 1 :(得分:1)
使用$ templateCache我认为这样可以用你自己的
替换模板表格:
<script type="text/ng-template" id="template/tabs/tabset.html"
src="/path/to/your/template.html"></script>
答案 2 :(得分:1)
嘿,谢谢你们的答案,实际上你们两个都是对的。
我的问题是我正在考虑倒退的解决方案。而不是替换每个指令的templateUrl参数,在我的情况下,我需要重命名我正在编译的模板的名称。例如....
我正在使用gulp和html2js捆绑我的模板文件。在导入angular-foundation之前,我的模板任务看起来像这样:
gulp.task('templates', function (cb) {
gulp.src('path/to/tempalates/**/*.html')
.pipe(html2js({
outputModuleName: 'my.templates',
base: './src/web/',
}))
.pipe(concat('templates.js'))
.pipe(insert.prepend("var angular = require('angular');"))
.pipe(gulp.dest('./src/web/'))
.on('end', done);
};
});
我继续从angular-foundation github存储库上传了html模板目录,并将其放在路径&path / to / foundation / template&#39;中。然后我更新了模板gulp任务,以便重命名&#39; path / to / foundation / template&#39;已经在指令中编码的路径的路径。例如,如果指令期望templateUrl为&#39; template / tab / tabs.html&#39;并且实际模板的位置是&#39; path / to / foundation / template / tab / tabs.html&#39;,然后重命名功能将替换&#39; path / to / foundation&#39;使用空字符串来制作路径&#39; template / tab / tabs.html&#39;在构建期间。我现在的最后一步看起来像是:
gulp.task('templates', function (cb) {
gulp.src('path/to/tempalates/**/*.html','path/to/foundation/template/**/*.html'])
.pipe(html2js({
outputModuleName: 'my.templates',
base: './src/web/',
rename : function (modulePath) {
var moduleName = modulePath.replace('path/to/foundation/', '').replace('.html', '');
return moduleName + '.html';
}
}))
.pipe(concat('templates.js'))
.pipe(insert.prepend("var angular = require('angular');"))
.pipe(gulp.dest('./src/web/'))
.on('end', done);
};
});
所以现在我的所有模板都是使用angular-foundation期望它们的路径构建的,并且我不会在运行时试图管理模板路径。
我希望这有助于其他人!