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
    23 июн 2016 в 22:27
  • Это нормально, что скрипты в заголовке 23 июн 2016 в 22:34
  • Template => template?
    – Qwertiy
    24 июн 2016 в 0:08
  • Такое измененеие тоже не помогло 24 июн 2016 в 9:24
  • А в каком месте вы <template></template> выводите? Добавьте console.log('directive'); в код директивы перед return и посмотрите, отрабатывает она или нет. 24 июн 2016 в 9:29

2 ответа 2

2

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

2
  • Спасибо, уже попробовал. Работает 26 июн 2016 в 21:01
  • 1
    @Dima , Можете тогда принять этот ответ? (Галочка под рейтингом ответа)
    – wop_wops
    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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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