AngularJS无法加载模板
[英]AngularJS Failed to load template
问题描述
I am trying with AngularJS directive, here is my code: 
我正在尝试使用AngularJS指令，这是我的代码：
index.html 的index.html
<!DOCTYPE html>
<html lang="en" ng-app="myapp">
<head>
<meta charset="UTF-8">
<title>Directive</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<photo photo-src="abc.jpg" caption="This is so Cool" />
</body>
</html>
app.js app.js
var app = angular.module('myapp',[]);
app.directive('photo',function(){
return {
restrict: 'E',
templateUrl: 'photo.html',
replace: true,
scope: {
caption: '@',
photoSrc: '@'
}
}
});
photo.html photo.html
<figure>
<img ng-src="{{photoSrc}}" width="500px">
<figcaption>{{caption}}</figcaption>
</figure>
I test the file by open it directly on browser. 我通过直接在浏览器上打开文件来测试文件。 It works fine on Firefox, but not on IE & chrome. 它在Firefox上可以正常工作，但在IE和chrome上却不能。 Both IE & Chrome show error of Failed to load template IE和Chrome均显示“ Failed to load template错误
How can I fix it? 我该如何解决？
2 个解决方案
解决方案1
3 2014-12-26 03:20:53
you should call it from a http webserver or you can write the template in the same file with a script tag like below: 您应该从http网络服务器调用它，也可以使用如下脚本标签将模板写在同一文件中：
<script type="text/ng-template" id="/tpl.html">
Content of the template.
</script>
解决方案2
0 2014-12-26 03:56:40
Its the security issue in chrome. chrome中的安全性问题。 Chrome doesn't allow cross domain requests. Chrome浏览器不允许跨域请求。 start-up chrome with --disable-web-security 使用--disable-web-security启动Chrome
On Windows: 在Windows上：
chrome.exe --disable-web-security chrome.exe-禁用网络安全
On Mac: 在Mac上：
open /Applications/Google\\ Chrome.app/ --args --disable-web-security 打开/ Applications / Google \\ Chrome.app/ --args --disable-web-security
This will allow cross-domain requests. 这将允许跨域请求。 Remember it will disable web security. 请记住，它将禁用网络安全性。
Don't worry, It will work when you host the files. 不用担心，在托管文件时它将起作用。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.