我正在尝试使用 AngularJS 指令，这是我的代码：
索引.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 和 chrome 上运行不佳。 IE 和 Chrome 均显示错误Failed to load template
我该如何修复它？
您应该从 http Web 服务器调用它，或者您可以使用脚本标记在同一文件中编写模板，如下所示：
<script type="text/ng-template" id="/tpl.html">
Content of the template.
</script>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
