javascript - Custom Directive not working in AngularJS error: $injector:modulerr -
i working jquery , html , found have write nav bar code each pages. decided add custom directive in file. have worked angularjs long time ago , in basic. appreciating. thank you.
html file:
<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 code:
(function(){ navmodule = angular.module("navmodule", []); navmodule.directive("navbar", function() { return { restrict: 'e', templateurl: "custom/navbar.html" }; }); })(); and navbar.html code:
<h2> navigation bar </h2> <h5> navigation bar </h5> and errors are:
xmlhttprequest cannot load file:///c:/users/ibtehaz/onedrive/3%20people/handyuncle/navbar.html. cross origin requests supported protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.(anonymous function) @ angular.min.js:87 angular.min.js:102 error: failed execute 'send' on 'xmlhttprequest': failed load 'file:///c:/users/ibtehaz/onedrive/3%20people/handyuncle/navbar.html'. @ error (native) @ file:///c:/users/ibtehaz/onedrive/3%20people/handyuncle/js/angular.min.js:87:37 @ n (file:///c:/users/ibtehaz/onedrive/3%20people/handyuncle/js/angular.min.js:82:442) @ f (file:///c:/users/ibtehaz/onedrive/3%20people/handyuncle/js/angular.min.js:80:174) @ file:///c:/users/ibtehaz/onedrive/3%20people/handyuncle/js/angular.min.js:112:113 @ n.$eval (file:///c:/users/ibtehaz/onedrive/3%20people/handyuncle/js/angular.min.js:126:15) @ n.$digest (file:///c:/users/ibtehaz/onedrive/3%20people/handyuncle/js/angular.min.js:123:106) @ n.$apply (file:///c:/users/ibtehaz/onedrive/3%20people/handyuncle/js/angular.min.js:126:293) @ file:///c:/users/ibtehaz/onedrive/3%20people/handyuncle/js/angular.min.js:17:479 @ 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 @ error (native) @ file:///c:/users/ibtehaz/onedrive/3%20people/handyuncle/js/angular.min.js:6:417 @ file:///c:/users/ibtehaz/onedrive/3%20people/handyuncle/js/angular.min.js:137:25 @ file:///c:/users/ibtehaz/onedrive/3%20people/handyuncle/js/angular.min.js:112:113 @ n.$eval (file:///c:/users/ibtehaz/onedrive/3%20people/handyuncle/js/angular.min.js:126:15) @ n.$digest (file:///c:/users/ibtehaz/onedrive/3%20people/handyuncle/js/angular.min.js:123:106) @ n.$apply (file:///c:/users/ibtehaz/onedrive/3%20people/handyuncle/js/angular.min.js:126:293) @ file:///c:/users/ibtehaz/onedrive/3%20people/handyuncle/js/angular.min.js:17:479 @ object.e [as invoke] (file:///c:/users/ibtehaz/onedrive/3%20people/handyuncle/js/angular.min.js:36:315) @ d (file:///c:/users/ibtehaz/onedrive/3%20people/handyuncle/js/angular.min.js:17:400)(anonymous function) @ angular.min.js:102 i know simple mistake, missing something. in advance.
seems using wrong syntax, try following:
<nav-bar></nav-bar> the next issue occurs because trying load template w/o running local web server. problem described here:
xmlhttprequest origin null not allowed access-control-allow-origin file:/// file:/// (serverless)
Comments
Post a Comment