demo of custom directive

Question

I'm trying to get a custom directive working in angular, partly following the official document.

In Chrome, i only see a blank page.

F12 shows this error:

XMLHttpRequest cannot load file:///home/jeff/workspace/angularjs-intro/playground/my-customer.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

Here's what i got so far:

  (function() {

    var app = angular.module('docsRestrictDirective', []);

    app.controller('Controller', function() {

    });

    app.directive('myCustomer', function() {
      return {
        restrict: 'E',
        templateUrl: 'my-customer.html'
      };
    });
  })();

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Example - example-example14-production</title>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
  <script src="script.js"></script>

</head>

<body ng-app="docsRestrictDirective">
  <div ng-controller="Controller">
    <my-customer></my-customer>
  </div>
</body>

</html>

And my-customer.html

Name: {{customer.name}} Address: {{customer.address}}

Any help is appreciated.

You need a div surrounding the my-customer.HTML. also I don't see any data being pass to the directive. — chr.solr, Aug 15 '15 at 01:47
Run your code on server. It is throwing cross-origin request error. — Ajay Narain Mathur, Aug 15 '15 at 01:50
I have answered. Does that help you to understand the issue and recommended solution??? — Ajay Narain Mathur, Aug 15 '15 at 02:21
@A.J thanks for the answer. disabling security does help to get the right answer. — XoXo, Aug 15 '15 at 11:22
@Twenty40 thanks for the pointer of "data being pass to the directive". i've put up a working sample in my answer. — XoXo, Aug 15 '15 at 11:23

score 1 · Answer 1 · answered Aug 15 '15 at 01:55

You should run your code on some server, as if you run without server the browser tries to load the page but the url is not of same domain. Therefore you get the stated error.

Read about CORS:

Cross-site HTTP requests initiated from within scripts have been subject to well-known restrictions, for well-understood security reasons. For example HTTP Requests made using the XMLHttpRequest object were subject to the same-origin policy. In particular, this meant that a web application using XMLHttpRequest could only make HTTP requests to the domain it was loaded from, and not to other domains. Developers expressed the desire to safely evolve capabilities such as XMLHttpRequest to make cross-site requests, for better, safer mash-ups within web applications.

Note: There are ways to disable-security in chrome but is not the recommended way.

Thanks for the answer. I end up using [disable-security](http://stackoverflow.com/questions/3102819/disable-same-origin-policy-in-chrome) for my local development. — XoXo, Aug 15 '15 at 11:14
i've encountered other issues in the disable-security mode, so i decide to use this [python -m SimpleHTTPServer 80](http://askubuntu.com/questions/377389/how-to-easily-start-a-webserver-in-any-folder) to start a server. and the issue goes away. — XoXo, Aug 15 '15 at 14:00

score 1 · Accepted Answer · answered Aug 15 '15 at 11:20

This is how i get it working:

in script.js: ("data being pass to the directive")

app.controller('Controller', function() {
    this.customer = {
        name: 'Alice',
        address: '123 Main Street',
    };
});

in test.html

<div ng-controller="Controller as ctrl">
<my-customer></my-customer>

Note that the alias as ctrl has to be used.

change my-customer.html to: (use the data in Controller)

Name: {{ctrl.customer.name}} Address: {{ctrl.customer.address}}

demo of custom directive

2 Answers2