AngularJS - directive not working

Question

I am an AngularJS newby. I am trying to display an image using a template of an AngularJS directive and on click of the image I want a marker to be placed on the image. I Don't know why it is not working.

The first directive:

directive('hello', function() {
    return {
        template: '<img id="map" src="http://www.lonelyplanet.com/maps/asia/india/map_of_india.jpg"  />',
        link: function(scope, element, attrs) {
            $('#map').click(
                function(e) {  
                    $('#marker').css('left', e.pageX).css('top', e.pageY).show();
                }
            );
         },
     };
});

The html code

 <hello>
    <img id="marker" src="http://maps.google.com/mapfiles/ms/micons/blue.png" style="display: none; position: absolute;" />   
 </hello>

a jsfiddle would be nice in this case

Dogoku
– Dogoku

2013-03-04 10:14:37 +00:00
Commented Mar 4, 2013 at 10:14 — Dogoku
– Dogoku, Commented Mar 4, 2013 at 10:14

Sam Barnum · Accepted Answer · 2014-01-13 21:25:27Z

39

Some other possible issues:

The Javascript file containing your directive is not being loaded. This can happen if you're using Yeoman to generate your directive, and your index.html file is not modified.
You are using a camelCase element name in your HTML instead of hyphenated. If your directive is called widgetForm and restrict is 'E' or 'A', you should use <widget-form/> , not <widgetForm/>.

answered Jan 13, 2014 at 21:25

Sam Barnum

10.8k4 gold badges58 silver badges63 bronze badges

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

3 Comments

Anthony Over a year ago

The widgetForm vs widget-form got me.

Deepak Thomas Over a year ago

Thanks! Easy mistake for first-timers. Kebab-case vs camelCase got me too!

Sam Barnum Over a year ago

One more: don't start the name of your directive or attributes with data. There is zero error reporting, but it is reserved and will do nothing.

Arun P Johny · Accepted Answer · 2013-03-04 10:31:13Z

25

You are missing the restrict : 'E' option, by default restrict has the value AC which is attribute and class, in your case you are using the directive as an element.

Update: Based on comment

angular.module('test', []).directive('hello', function() {
    return {
        restrict : 'E',
        template : '<div style="position: relative"><img id="map" src="http://www.lonelyplanet.com/maps/asia/india/map_of_india.jpg"  /><img id="marker" src="http://maps.google.com/mapfiles/ms/micons/blue.png" style="display: none; position: absolute;" /></div>',
        replace: true,
        link : function(scope, element, attrs) {
            $('#map').click(function(e) {
                        $('#marker').css('left', e.pageX).css('top', e.pageY)
                                .show();
                    });
        }
    };
});

Demo: Fiddle

edited Mar 4, 2013 at 10:31

answered Mar 4, 2013 at 10:16

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

4 Comments

agasthyan Over a year ago

ok now the image shows up but the on click is still not triggered

agasthyan Over a year ago

its an image.it should appear where ever i click the mouse on the map image

Arun P Johny Over a year ago

checkout the demo, on click there is a blue image appearing

ichigolas Over a year ago

That's a sensible default. Even when I had this trouble before, I spent an entire morning with this thing again when things seemed to stop working magically. I think a change in the angular version used in the legacy code was the trigger of the "bug".

Nur Rony · Accepted Answer · 2013-03-04 11:22:31Z

By default when you make a directive in angularjs. if you ignore restrict property angularjs assume it as an attribute. as your html showing you should write your returning object as bellow

  <body ng-app="myApp">
    <hello>
      <div id="marker"></div>
    </hello>
  </body>

and in angular the element is already a jQuery object even if you do not add jquery it will use its own implementation call jQLite. so you should only use

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

app.directive('hello',function(){
  var linkFn = function (scope,element,attrs){
      element.bind('click',function(e){
        $('#marker').css('left', e.pageX).css('top', e.pageY).show();
      });
  };
  return {
    restrict : "E",
    link: linkFn,
    transclude:true,
    template:'<div ng-transclude><img id="map" src="http://www.lonelyplanet.com/maps/asia/india/map_of_india.jpg"  /></div>'
  };

});

i hope it helps working exmaple

JSAddict · Accepted Answer · 2013-03-04 10:23:23Z

1

What @Arun said is correct. But it is not mandatory. By default ur directive will be attribute.

So Instead of using ur directive as a element

<hello>
    <img id="marker" src="http://maps.google.com/mapfiles/ms/micons/blue.png"style="display: none; position: absolute;" />    
</hello>

try it as an attribute, like this

<img id="marker" src="http://maps.google.com/mapfiles/ms/micons/blue.png" style="display: none; position: absolute;" hello />

answered Mar 4, 2013 at 10:23

JSAddict

12.4k7 gold badges31 silver badges49 bronze badges

2 Comments

agasthyan Over a year ago

it displaying fine now, but the onclick is not triggered

JSAddict Over a year ago

where u are using the id "map" where is it? a js fiddle would be an easy way to solve ur pblm

Jeroen · Accepted Answer · 2016-07-02 17:37:00Z

1

Don't append "Directive" to the first string argument:

.directive("someDirective", someDirective)

Should've been this for me:

.directive("some", someDirective)

At least, it should be, if you want to use:

<some>stuff</some>

Finding copy-paste errors is awful. Needing to find one is too... :'(

answered Jul 2, 2016 at 17:37

Jeroen

64.4k47 gold badges231 silver badges372 bronze badges

Collectives™ on Stack Overflow

AngularJS - directive not working

5 Answers 5

3 Comments

4 Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

4 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related