Пользовательская директива, не работающая в AngularJS error: $ injector: modulerr

Я работал с jQuery и html, а затем обнаружил, что мне приходится писать текстовый штрих-код для каждой страницы. Поэтому я решил добавить в файл настраиваемую директиву. Я работал с angularJS давным-давно, и я был только в основном. Некоторая помощь действительно ценится. Спасибо.

HTML файл:

<html ng-app="navModule"> 
<head> 
    <link rel="stylesheet" type="text/css" href="css/front.css"> 
    <script src="js/angular.min.js"></script> 
    <script src="js/customDirective.js"></script> 
</head> 

<body> 
<!-- Custom Directive--> 
    <div> 
     <nav-bar> 
     </nav-bar > 
     </div> 
<!-- Custom Directive  --> 
</body> 
</html>

AngularJS код:

(function(){ 

navModule = angular.module("navModule", []); 


navModule.directive("navBar", function() { 
return { 
    restrict: 'E', 
    templateUrl: "custom/navBar.html" 
}; 
}); 


})();

и navBar.html код:

<h2> This is navigation bar </h2> 
<h5> this is navigation bar </h5>

и ошибки:

XMLHttpRequest cannot load file:///C:/Users/Ibtehaz/OneDrive/3%20people/HandyUncle/navBar.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.(anonymous function) @ angular.min.js:87 
angular.min.js:102 Error: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file:///C:/Users/Ibtehaz/OneDrive/3%20people/HandyUncle/navBar.html'. 
at Error (native) 
at file:///C:/Users/Ibtehaz/OneDrive/3%20people/HandyUncle/js/angular.min.js:87:37 
at n (file:///C:/Users/Ibtehaz/OneDrive/3%20people/HandyUncle/js/angular.min.js:82:442) 
at f (file:///C:/Users/Ibtehaz/OneDrive/3%20people/HandyUncle/js/angular.min.js:80:174) 
at file:///C:/Users/Ibtehaz/OneDrive/3%20people/HandyUncle/js/angular.min.js:112:113 
at n.$eval (file:///C:/Users/Ibtehaz/OneDrive/3%20people/HandyUncle/js/angular.min.js:126:15) 
at n.$digest (file:///C:/Users/Ibtehaz/OneDrive/3%20people/HandyUncle/js/angular.min.js:123:106) 
at n.$apply (file:///C:/Users/Ibtehaz/OneDrive/3%20people/HandyUncle/js/angular.min.js:126:293) 
at file:///C:/Users/Ibtehaz/OneDrive/3%20people/HandyUncle/js/angular.min.js:17:479 
at Object.e [as invoke] (file:///C:/Users/Ibtehaz/OneDrive/3%20people/HandyUncle/js/angular.min.js:36:315)(anonymous function) @ angular.min.js:102 

angular.min.js:102 Error: [$compile:tpload] http://errors.angularjs.org/1.3.15/$compile/tpload?p0=navBar.html 
at Error (native) 
at file:///C:/Users/Ibtehaz/OneDrive/3%20people/HandyUncle/js/angular.min.js:6:417 
at file:///C:/Users/Ibtehaz/OneDrive/3%20people/HandyUncle/js/angular.min.js:137:25 
at file:///C:/Users/Ibtehaz/OneDrive/3%20people/HandyUncle/js/angular.min.js:112:113 
at n.$eval (file:///C:/Users/Ibtehaz/OneDrive/3%20people/HandyUncle/js/angular.min.js:126:15) 
at n.$digest (file:///C:/Users/Ibtehaz/OneDrive/3%20people/HandyUncle/js/angular.min.js:123:106) 
at n.$apply (file:///C:/Users/Ibtehaz/OneDrive/3%20people/HandyUncle/js/angular.min.js:126:293) 
at file:///C:/Users/Ibtehaz/OneDrive/3%20people/HandyUncle/js/angular.min.js:17:479 
at Object.e [as invoke] (file:///C:/Users/Ibtehaz/OneDrive/3%20people/HandyUncle/js/angular.min.js:36:315) 
at d (file:///C:/Users/Ibtehaz/OneDrive/3%20people/HandyUncle/js/angular.min.js:17:400)(anonymous function) @ angular.min.js:102

Я знаю его простую ошибку, чего-то не хватает. Спасибо заранее.

источник

2015-04-26 Ibtehaz

Какое имя модуля не работает? – Chandermani

Ваш ангуляр JS включен в ваш HTML? Я не вижу, чтобы он включал в себя –

У меня есть только одна директива. Ничего больше в JS-файле. – Ibtehaz

Похоже, ваш используете неправильный синтаксис, попробуйте следующее:

<nav-bar></nav-bar>

Следующая проблема возникает потому, что ваш пытаетесь загрузить шаблон без запуска локального веб-сервера. Эта проблема хорошо описана здесь:

XMLHttpRequest Origin null is not allowed Access-Control-Allow-Origin for file:/// to file:/// (Serverless)

источник

2015-04-26 10:47:37

Убедитесь, что вы используете локальный сервер для того, чтобы запустить приложение, поскольку XMLHttpRequest означает, что приложение делает асинхронный вызов.

Просто попробуйте развернуть приложение на локальном сервере (вы можете использовать apache tomcat). Кроме того, у вас его нет, использование может использовать любую IDE, у которой есть собственный локальный сервер (например, скобки), поэтому не требуется создавать/устанавливать локальный сервер вручную.

источник

2015-04-26 13:04:58

У меня есть локальный сервер. Я использую XAMPP. Я также использую кронштейн. – Ibtehaz

Попробуйте запустить код только из скобок. Нет необходимости иметь отдельный сервер. –

Пользовательская директива, не работающая в AngularJS error: $ injector: modulerr

ответ

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