Question

我正在尝试使用AngularJS指令，这是我的代码：

的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

<figure>
    <img ng-src="{{photoSrc}}" width="500px">
    <figcaption>{{caption}}</figcaption>
</figure>

我直接在浏览器上打开它来测试文件。它适用于Firefox，但不适用于IE＆amp;铬。 IE＆amp; Chrome显示错误Failed to load template

我该如何解决？

Answer 1

您应该从http网络服务器调用它，或者您可以使用如下脚本标记在同一文件中编写模板：

<script type="text/ng-template" id="/tpl.html">
    Content of the template.
</script>

Answer 2

它是chrome中的安全问题。 Chrome不允许跨域请求。使用--disable-web-security

启动chrome

在Windows上：

chrome.exe --disable-web-security

在Mac上：

open / Applications / Google \ Chrome.app/ --args --disable-web-security

这将允许跨域请求。请记住，它会禁用网络安全。

不用担心，托管文件时它会起作用。

AngularJS无法加载模板

2 个答案: