AngularJS 无法加载模板 [英] AngularJS Failed to load template
本文介绍了AngularJS 无法加载模板的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试使用 AngularJS 指令,这是我的代码:
I am trying with AngularJS directive, here is my code:
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: '@'
}
}
});
照片.html
<figure>
<img ng-src="{{photoSrc}}" width="500px">
<figcaption>{{caption}}</figcaption>
</figure>
我通过直接在浏览器上打开来测试文件.它在 Firefox 上运行良好,但不适用于 IE &铬合金.IE 和Chrome 显示 Failed to load template
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屋!
查看全文