agasthyan agasthyan - 1 year ago 56
Javascript Question

Angular directive not working

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="" />',
link: function(scope, element, attrs) {
function(e) {
$('#marker').css('left', e.pageX).css('top', e.pageY).show();

The html code

<img id="marker" src="" style="display: none; position: absolute;" />

Answer Source

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=""  /><img id="marker" src="" 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)

Demo: Fiddle