2014-12-26 3 views
2

Я пытаюсь с директивой AngularJS, вот мой код: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> 

Я тестирую файл ope n непосредственно в браузере. Он отлично работает на Firefox, но не на IE & хром. Оба IE & Chrome показывают ошибку Failed to load template

Как это исправить?

+0

посмотреть в сети, чтобы узнать, какой путь он пытается загрузить с – PSL

+0

@PSL Путь, который он пытается загрузить, верен. Это ошибка от chrome '' Ошибка: не удалось выполнить 'send' on 'XMLHttpRequest': не удалось загрузить файл: /// E:/www/lab/angularjs/directive/photo.html'.'' – user1995781

+1

ie потому что вы пытаетесь загрузить с использованием файлового протокола. Разве это не размещение? Возможно, вам придется отключить безопасность, чтобы она загружалась ... так что отсутствие источника не является проблемой. – PSL

ответ

3

вы должны вызвать его с HTTP веб-сервер, или вы можете написать шаблон в том же файле с помощью тега сценария, как показано ниже:

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

Сво проблема безопасности в хроме. Chrome не разрешает перекрестные запросы домена. запуск хром с --disable-веб-безопасности

В Windows:

chrome.exe повреждают-веб-безопасности

На Mac:

открыть/Applications/Google \ Chrome.app/ --args --disable-web-security

Это позволит выполнять междоменные запросы. Помните, что это отключит веб-безопасность.

Не волнуйтесь, он будет работать, когда вы размещаете файлы.

Смежные вопросы