I cant' create and use AngularJS directive

Question

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

score 0 · Answer 1 · answered Jun 24 '16 at 12:35

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.

answered Jun 24 '16 at 12:35

Gregori

829
5
12

When I use `template:"
Random content
"` It works successfully. I don't use any URL. I open it as file://... May be should try Tomcat or etc? – Dima Lukashov Jun 24 '16 at 19:25
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 – Gregori Jun 24 '16 at 19:45
On netbeans, there is probably a built in server... I found this: https://netbeans.org/projects/php/lists/users/archive/2015-01/message/21 – Gregori Jun 24 '16 at 19:45
Or you can read a file from AngularJS via a directive... like this: http://stackoverflow.com/questions/18839048/how-to-read-a-file-in-angularjs – Gregori Jun 24 '16 at 19:46
I recommend going to the route of a local web server... tomcat, jboss, express, live-server and serve the files via HTTP or HTTPs. – Gregori Jun 24 '16 at 19:46
You want your browser to make it hard to read local files... If not, every site could read your local disk/drive and that would be a security/privacy nightmare. – Gregori Jun 25 '16 at 01:27

I cant' create and use AngularJS directive

1 Answers1

Random content