AngularJS

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>

Sam Barnum · Accepted Answer

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/>.

Arun P Johny · Answer

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

Nur Rony · Answer

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

AngularJS - directive not working

Tags:

javascript

angularjs-directive

agasthyan

3 Answers

Sam Barnum

Arun P Johny

Nur Rony

Recent Activity

Donate For Us