3

Хочу использовать директивы AngularJS, но они просто не включаются, не знаю что делать, HTML

    <!DOCTYPE html>
<html ng-app="mainModule">
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script type="text/javascript" src="angular.min.js"></script>
        <script type="text/javascript" src="app.js"></script>
    </head>
    <body ng-controller="mainCtrl">
        {{a}}
    </body>
</html>

JavaScript(app.js):

    (function(){
angular.module("mainModule", [])
        .controller("mainCtrl", function($scope){
            $scope.a = "Hi!";
        })
        .directive("Template", function(){
            return{
                restrict:"E",
                templateUrl:"template.html"
            };
        });
})();

template.html:

<div>
    Hello World
</div>

При использовании моего тэга <template></template> подсвечивает красным и ругается на ошибку. Другие фичи Angular работают, если убрать .directive(...), если же .directive(...) оставить, то не работает, ни модуль, ни контроллер. Всё лежит в одной папке, никаких подпапок.

P.S. Поэксперементировал с кодом, как только начинаю использовать .directive весь AngularJS перестаёт работать.

Вывод console.log("directive"):

directive
angular.min1.js:79 XMLHttpRequest cannot load file:///home/dimonluk/NetBeansProjects/HTML5Application/public_html/template.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.(anonymous function) @ angular.min1.js:79
angular.min1.js:93 Error: [$compile:tpload] http://errors.angularjs.org/1.2.29/$compile/tpload?p0=template.html
    at Error (native)
    at file:///home/dimonluk/NetBeansProjects/HTML5Application/public_html/angular.min1.js:6:450
    at file:///home/dimonluk/NetBeansProjects/HTML5Application/public_html/angular.min1.js:61:425
    at file:///home/dimonluk/NetBeansProjects/HTML5Application/public_html/angular.min1.js:73:70
    at w (file:///home/dimonluk/NetBeansProjects/HTML5Application/public_html/angular.min1.js:102:167)
    at w (file:///home/dimonluk/NetBeansProjects/HTML5Application/public_html/angular.min1.js:102:167)
    at w (file:///home/dimonluk/NetBeansProjects/HTML5Application/public_html/angular.min1.js:102:167)
    at file:///home/dimonluk/NetBeansProjects/HTML5Application/public_html/angular.min1.js:103:428
    at h.$eval (file:///home/dimonluk/NetBeansProjects/HTML5Application/public_html/angular.min1.js:114:32)
    at h.$digest (file:///home/dimonluk/NetBeansProjects/HTML5Application/public_html/angular.min1.js:111:117)(anonymous function) @ angular.min1.js:93
7
  • Объясните мне, это нормально, что скрипты подключаются в заголовке?
    – Doofy
    Commented 23 июн. 2016 в 22:27
  • Это нормально, что скрипты в заголовке Commented 23 июн. 2016 в 22:34
  • Template => template?
    – Qwertiy
    Commented 24 июн. 2016 в 0:08
  • Такое измененеие тоже не помогло Commented 24 июн. 2016 в 9:24
  • А в каком месте вы <template></template> выводите? Добавьте console.log('directive'); в код директивы перед return и посмотрите, отрабатывает она или нет. Commented 24 июн. 2016 в 9:29

2 ответа 2

2

Используйте локальный сервер. Например, http-server.
( Это связано с Same origin policy )

2
  • Спасибо, уже попробовал. Работает Commented 26 июн. 2016 в 21:01
  • 1
    @Dima , Можете тогда принять этот ответ? (Галочка под рейтингом ответа)
    – wop_wops
    Commented 27 июн. 2016 в 10:28
1

При простом открытии файла html в строке адреса можно увидеть протокол file:///, который показывает, что не используется никакой сервер.

Ангуляр загружает шаблоны с помощью обычного AJAX запроса, который работает только на протоколах http, https, и так как в данном случае протокол другой бросается ошибка.

Для решения можно использовать сервер, как советуют в соседнем ответе, либо прописать шаблон не в отдельном файле, а в том же.

(function() {
  angular.module("mainModule", [])
    .controller("mainCtrl", function($scope) {
      $scope.a = "Hi!";
    })
    .directive("customTemplate", function() {
      return {
        restrict: "E",
        templateUrl: "template.html"
      };
    });
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<div ng-app="mainModule">
  <div ng-controller="mainCtrl">
    {{a}}
    <custom-template></custom-template>
  </div>
  <script id="template.html" type="text/ng-template">
    <div>
      Hello World! I'm template.
    </div>
  </script>
</div>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.