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

【问题标题】：Custom Directive not working in AngularJS error: $injector:modulerr自定义指令在 AngularJS 错误中不起作用：$injector:modulerr
【发布时间】：2015-04-26 21:04:58
【问题描述】：

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

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

【问题讨论】：

哪个模块名失败了？
您的 Angular JS 是否包含在您的 HTML 中？我没有看到它包含在任何地方
我只有一个指令。 JS 文件中没有其他内容。
对不起。我愿意。并发现了一组新的错误。
您能发布您的应用结构吗？

标签： javascript jquery html css angularjs

【解决方案1】：

好像你使用了错误的语法，请尝试以下操作：

<nav-bar></nav-bar>

出现下一个问题是因为您尝试在不运行本地 Web 服务器的情况下加载模板。这个问题在这里得到了很好的描述：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

我有一个本地服务器。我正在使用 XAMPP。我也在用括号。
尝试仅从方括号中运行您的代码。无需单独的服务器。