AngularJS无法加载模板 [英] AngularJS Failed to load template
本文介绍了AngularJS无法加载模板的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使用AngularJS指令，这是我的代码：
I am trying with AngularJS directive, here is my code:
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
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>
我通过直接在浏览器上打开来测试文件。它适用于Firefox，但不适用于IE&铬。 IE& Chrome显示错误无法加载模板
I test the file by open it directly on browser. It works fine on Firefox, but not on IE & chrome. Both IE & Chrome show error of Failed to load template
如何修复？
推荐答案
您应该从http网络服务器调用它，或者您可以使用如下脚本标记在同一文件中编写模板：
you should call it from a http webserver or you can write the template in the same file with a script tag like below:
<script type="text/ng-template" id="/tpl.html">
Content of the template.
</script>
这篇关于AngularJS无法加载模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
