17

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>
1
  • a jsfiddle would be nice in this case
    – Dogoku
    Mar 4, 2013 at 10:14

5 Answers 5

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/>.
3
  • 10
    The widgetForm vs widget-form got me.
    – Anthony
    Dec 3, 2014 at 20:15
  • Thanks! Easy mistake for first-timers. Kebab-case vs camelCase got me too! Aug 7, 2017 at 9:44
  • 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.
    – Sam Barnum
    Nov 6, 2017 at 21:43
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

4
  • ok now the image shows up but the on click is still not triggered
    – agasthyan
    Mar 4, 2013 at 10:19
  • its an image.it should appear where ever i click the mouse on the map image
    – agasthyan
    Mar 4, 2013 at 10:27
  • checkout the demo, on click there is a blue image appearing Mar 4, 2013 at 10:40
  • 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".
    – ichigolas
    Aug 2, 2016 at 15:33
2

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

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 /> 
2
  • it displaying fine now, but the onclick is not triggered
    – agasthyan
    Mar 4, 2013 at 10:25
  • where u are using the id "map" where is it? a js fiddle would be an easy way to solve ur pblm
    – JSAddict
    Mar 4, 2013 at 10:27
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... :'(

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.