AngularJS Failed to load template

Question

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?

look at the network to see what path it is trying to load from — PSL, Dec 26 '14 at 02:32
@PSL The path it is trying to load is correct. This is the error from chrome ``Error: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file:///E:/www/lab/angularjs/directive/photo.html'.`` — user1995781, Dec 26 '14 at 02:42
i.e because you are trying to load using file protocol. Is it not hosted? You may have to disable security to have it load... so that lack of origin is not an issue. — PSL, Dec 26 '14 at 02:43
might be relevant : I had the same issue ,i made sure that the template path is mentioned properly and then ran " grunt watch " ,it is important that the build directory is able to build any latest file — sg28, Nov 14 '16 at 21:14

score 3 · Answer 1 · answered Dec 26 '14 at 03:20

3

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>

answered Dec 26 '14 at 03:20

huan feng

7,307
2
32
56

score 0 · Answer 2 · answered Dec 26 '14 at 03:56

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.

AngularJS Failed to load template

2 Answers2

Linked