自定義指令不工作在AngularJS錯誤：$ 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

是你的HTML包含的Angualar JS嗎？我沒有看到它包含在任何地方 –

我只有一個指令。沒有其他的JS文件。 – Ibtehaz

好像你正在使用錯誤的語法，嘗試以下操作：發生

<nav-bar></nav-bar>

下一個問題，因爲你要加載模板W/O運行的本地Web服務器。這個問題很好說明如下：

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錯誤：$ injector：modulerr

回答

相關問題