AngularJS Failed to load template

问题

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: '@'
        }
    }
});

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. Both IE & Chrome show error of Failed to load template

How can I fix it?

回答1:

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>

回答2:

Its the security issue in chrome. Chrome doesn't allow cross domain requests. start-up chrome with --disable-web-security

On Windows:

chrome.exe --disable-web-security

On Mac:

open /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.

来源：https://stackoverflow.com/questions/27652244/angularjs-failed-to-load-template

标签

javascript

angularjs

angularjs-directive