自定义指令在AngularJS中不起作用错误：$ injector：modulerr

Question

我使用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

我知道这是一个简单的错误，我缺少了一些东西。 提前致谢。

Answer 1

似乎您使用的语法错误，请尝试以下操作：

<nav-bar></nav-bar>

发生下一个问题，因为您正在尝试不运行本地Web服务器而加载模板。 这个问题在这里有很好的描述：

XMLHttpRequest原点null不允许file：///到file：///的Access-Control-Allow-Origin（无服务器）

Answer 2

确保使用本地服务器来运行您的应用程序，因为XMLHttpRequest表示您的应用程序正在进行异步调用。

只需尝试将应用程序部署在本地服务器上即可（您可以使用apache tomcat）。 否则，您将无法使用拥有自己本地服务器的任何IDE（例如方括号），因此不需要手动创建/安装本地服务器。

自定义指令在AngularJS中不起作用错误：$ injector：modulerr

问题描述

2 个解决方案

解决方案1
2 2015-04-26 10:47:37

解决方案2
0 2015-04-26 13:04:58

自定义指令在AngularJS中不起作用错误：$ injector：modulerr

问题描述

2 个解决方案

解决方案1 2 2015-04-26 10:47:37

解决方案2 0 2015-04-26 13:04:58

解决方案1
2 2015-04-26 10:47:37

解决方案2
0 2015-04-26 13:04:58