0

I have some problem I need to use AngularJS directive but when I create them my NetBeans stresses my new directive and show me an error. That's what I have HTML:

<!DOCTYPE html> <html ng-app="mainModule"> <head> <title>TODO supply a title</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script type="text/javascript" src="angular.min1.js"></script> <script type="text/javascript" src="app.js"></script> </head> <body ng-controller="mainCtrl"> {{a}} <div><random></random> </div> </body> </html>

JavaScript(app.js)

(function(){ var app = angular.module("mainModule", []); app.controller("mainCtrl", function($scope){ $scope.a = "hi"; }); app.directive("random", function(){ console.log("directive"); return { restrict:"E", templateUrl:"random.html" }; }); })();

console.log("directive")

directive angular.min1.js:79 XMLHttpRequest cannot load file:///random.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.(anonymous function) @ angular.min1.js:79s @ angular.min1.js:74f @ angular.min1.js:72K @ angular.min1.js:102K @ angular.min1.js:102(anonymous function) @ angular.min1.js:103$eval @ angular.min1.js:114$digest @ angular.min1.js:111$apply @ angular.min1.js:114(anonymous function) @ angular.min1.js:18d @ angular.min1.js:35c @ angular.min1.js:18cc @ angular.min1.js:18Xc @ angular.min1.js:17(anonymous function) @ angular.min1.js:217a @ angular.min1.js:146(anonymous function) @ angular.min1.js:31r @ angular.min1.js:7c @ angular.min1.js:31 angular.min1.js:93 Error: [$compile:tpload] http://errors.angularjs.org/1.2.29/$compile/tpload?p0=%2Frandom.html at Error (native) at file:///home/dimonluk/NetBeansProjects/HTML5Application/public_html/angular.min1.js:6:450 at file:///home/dimonluk/NetBeansProjects/HTML5Application/public_html/angular.min1.js:61:425 at file:///home/dimonluk/NetBeansProjects/HTML5Application/public_html/angular.min1.js:73:70 at w (file:///home/dimonluk/NetBeansProjects/HTML5Application/public_html/angular.min1.js:102:167) at w (file:///home/dimonluk/NetBeansProjects/HTML5Application/public_html/angular.min1.js:102:167) at w (file:///home/dimonluk/NetBeansProjects/HTML5Application/public_html/angular.min1.js:102:167) at file:///home/dimonluk/NetBeansProjects/HTML5Application/public_html/angular.min1.js:103:428 at h.$eval (file:///home/dimonluk/NetBeansProjects/HTML5Application/public_html/angular.min1.js:114:32) at h.$digest (file:///home/dimonluk/NetBeansProjects/HTML5Application/public_html/angular.min1.js:111:117)(anonymous function) @ angular.min1.js:93(anonymous function) @ angular.min1.js:68w @ angular.min1.js:102w @ angular.min1.js:102w @ angular.min1.js:102(anonymous function) @ angular.min1.js:103$eval @ angular.min1.js:114$digest @ angular.min1.js:111$apply @ angular.min1.js:114(anonymous function) @ angular.min1.js:18d @ angular.min1.js:35c @ angular.min1.js:18cc @ angular.min1.js:18Xc @ angular.min1.js:17(anonymous function) @ angular.min1.js:217a @ angular.min1.js:146(anonymous function) @ angular.min1.js:31r @ angular.min1.js:7c @ angular.min1.js:31
Improve this question

1 Answer 1

Reset to default
0

Your issue seems to be about your browser blocking access to random.html due to cross-origin. As a first step for testing, replace templateUrl with template:

 app.directive("random", function(){ console.log("directive"); return { restrict:"E", templateUrl:`<h1>random content</h1>` }; });

If that works, please explain how you are running your app. Is it on localhost? Are you using tomcat, jboss, etc.? You would need to allow cross origin (for instance on Tomcat) or let us know which URL you are using to view your app and random.html (e.g. localhost:8080/index.html for the app and localhost:8080/random.html?)

I have a plunker here for another question that shows directives using Template and TemplateURL.

Let us know.

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

When I use template:"<h1>Random content</h1>" It works successfully. I don't use any URL. I open it as file://... May be should try Tomcat or etc?
The browser is blocking you from reading a local file via your HTTP request. One solution is to run a local web server. live-server is a popular one that you can include in gulp, Atom Editor, etc. As you seem to be using netbeans, if you know how to deploy to tomcat that would work as the local web server will serve your file via URLs like localhost:8080/account.html
On netbeans, there is probably a built in server... I found this: netbeans.org/projects/php/lists/users/archive/2015-01/message/…
Or you can read a file from AngularJS via a directive... like this: stackoverflow.com/questions/18839048/…
I recommend going to the route of a local web server... tomcat, jboss, express, live-server and serve the files via HTTP or HTTPs.
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.