[英]Angular Foundation Directives templateUrl Property
我使用的是angular-foundation( http://pineconellc.github.io/angular-foundation/ ),该方法利用angular指令来实现诸如Modals,Tabs和其他前端服务之类的Foundation东西。
我遇到的问题是,所有指令都具有预先填充的“ 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自述文件中,他们提到了自定义模板( https://github.com/pineconellc/angular-foundation )关于$ templateCache的内容,但是目前我不确定如何将库中定义的templateUrl更改为模板的位置。
任何对此的指导将不胜感激!
既然没有人回答,我会给您一个机会,它可能会对您有帮助,ossys(请注意任何主持人,如果我错了,请随时删除我的答案)。
如果您通过bower install
该库,则这些模板应位于bower_components/angular-foundation
某个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('./'))
我认为使用$ templateCache可以用您自己的模板替换模板
对于标签:
<script type="text/ng-template" id="template/tabs/tabset.html" src="/path/to/your/template.html"></script>
嘿,谢谢你们的回答,实际上你们俩都是正确的。
我的问题是我在想解决方案。 在我的情况下,我不需要重命名每个指令的templateUrl参数,而是需要重命名正在编译的模板的名称。 例如....
我正在使用gulp和html2js捆绑我的模板文件。 在导入角度基础之前,我的模板任务如下所示:
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”中。 然后,我更新了模板gulp任务,以便将“ path / to / foundation / template”路径重命名为指令中已编码的路径。 例如,如果指令期望templateUrl为“ template / tab / tabs.html”,而实际模板的位置为“ path / to / foundation / template / tab / tabs.html”,则重命名函数将替换“ path / to / foundation”(带有空字符串),以在构建期间生成路径“ template / tab / tabs.html”。 我最后的任务是这样的:
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期望它们所位于的路径构建的,并且我在运行时尝试管理模板路径时也不会遇到麻烦。
希望这对其他人有帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.