相对于.js文件的Angular指令templateUrl
我正在构建一个angular指令，它将在几个不同的位置使用。我不能总是保证使用指令的应用程序的文件结构，但我可以强制用户将directive.js和directive.html (不是真正的文件名)放在同一个文件夹中。
当页面计算directive.js时，它认为templateUrl是相对于自身的。是否可以将templateUrl设置为相对于directive.js文件？
或者建议在指令本身中只包含模板。
我在想，我可能希望根据不同的情况加载不同的模板，所以我更希望能够使用相对路径，而不是更新directive.js
回答 5
Stack Overflow用户
发布于 2014-01-14 08:06:57
正如您所说的，您希望在不同的时间为指令提供不同的模板，为什么不允许模板本身作为属性传递给指令呢？
<div my-directive my-template="template"></div>
然后在指令中使用类似于$compile(template)(scope)的内容。
Stack Overflow用户
发布于 2015-12-31 12:52:46
除了Alon Gubkin的回答之外，我建议使用立即调用的函数表达式定义一个常量来存储脚本的路径，并将其注入到指令中：
angular.module('app', [])
.constant('SCRIPT_URL', (function () {
var scripts = document.getElementsByTagName("script");
var scriptPath = scripts[scripts.length - 1].src;
return scriptPath.substring(0, scriptPath.lastIndexOf('/') + 1)
})())
.directive('test', function(SCRIPT_URL) {
return {
restrict : 'A',
templateUrl : SCRIPT_URL + 'directive.html'
}
});Stack Overflow用户
发布于 2014-03-27 21:13:08
此代码位于名为routes.js的文件中
以下内容对我不起作用：
var scripts = document.getElementsByTagName("script")
var currentScriptPath = scripts[scripts.length-1].src;
var baseUrl = currentScriptPath.substring(0, currentScriptPath.lastIndexOf('/') + 1);下面是这样做的：
var bu2 = document.querySelector("script[src$='routes.js']");
currentScriptPath = bu2.src;
baseUrl = currentScriptPath.substring(0, currentScriptPath.lastIndexOf('/') + 1);我的测试是基于以下关于使用require to lazy load angular的博客：http://ify.io/lazy-loading-in-angularjs/
require.js产生一个requireConfig引导程序
requireConfig产生一个角度app.js
angular app.js诞生了我的routes.js
我有一个revel web框架和asp.net mvc提供了相同的代码。在revel中，脚本(“document.getElementsByTagName”)生成了一个指向我所需的引导js文件的路径，而不是我的routes.js。在Visual Studio MVC中，它生成了一个指向Visual Studio的注入浏览器链接脚本元素的路径，该元素在调试会话期间被放入其中。
这是我的routes.js工作代码：
define([], function()
{
var scripts = document.getElementsByTagName("script");
var currentScriptPath = scripts[scripts.length-1].src;
console.log("currentScriptPath:"+currentScriptPath);
var baseUrl = currentScriptPath.substring(0, currentScriptPath.lastIndexOf('/') + 1);
console.log("baseUrl:"+baseUrl);
var bu2 = document.querySelector("script[src$='routes.js']");
currentScriptPath = bu2.src;
console.log("bu2:"+bu2);
console.log("src:"+bu2.src);
baseUrl = currentScriptPath.substring(0, currentScriptPath.lastIndexOf('/') + 1);
console.log("baseUrl:"+baseUrl);
return {
defaultRoutePath: '/',
routes: {
'/': {
templateUrl: baseUrl + 'views/home.html',
dependencies: [
'controllers/HomeViewController',
'directives/app-style'
]
},
'/about/:person': {
templateUrl: baseUrl + 'views/about.html',
dependencies: [
'controllers/AboutViewController',
'directives/app-color'
]
},
'/contact': {
templateUrl: baseUrl + 'views/contact.html',
dependencies: [
'controllers/ContactViewController',
'directives/app-color',
'directives/app-style'
]
}
}
};
});这是我从Revel运行时的控制台输出。
currentScriptPath:http://localhost:9000/public/ngApps/1/requireBootstrap.js routes.js:8
baseUrl:http://localhost:9000/public/ngApps/1/ routes.js:10
bu2:[object HTMLScriptElement] routes.js:13
src:http://localhost:9000/public/ngApps/1/routes.js routes.js:14
baseUrl:http://localhost:9000/public/ngApps/1/ 我做的另一件很好的事情是利用了require配置，并在其中添加了一些自定义配置。也就是说，添加
customConfig: { baseRouteUrl: '/AngularLazyBaseLine/Home/Content' } 然后，您可以通过在routes.js内部使用以下代码来获取它
var requireConfig = requirejs.s.contexts._.config;
console.log('requireConfig.customConfig.baseRouteUrl:' + requireConfig.customConfig.baseRouteUrl); 有时你需要预先定义一个baseurl，有时你需要动态生成它。你对你的情况的选择。
https://stackoverflow.com/questions/21103724
复制相似问题