[英]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.