Bind events on AngularJS element directives using jQuery

Question

I have a directive in AngularJS:

module = angular.module("demoApp", [], null);
module.directive('sample', function () {
    return {
        restrict: "E",
        transclude: true,
        replace: true,
        template: "<div ng-transclude></div>",
        controller: function ($scope, $element) {
            this.act = function (something) {
                //problematic line HERE
                $element.trigger("myEvent.sample", [something]);
            };
        }
    };
})
.directive('item', function () {
    return {
        restrict: "E",
        require: "^sample",
        transclude: true,
        replace: true,
        template: "<a ng-transclude style='display: inline-block; border: 1px solid crimson; margin: 2px; padding: 5px; color: crimson; text-decoration: none; background: #f5d0d0; cursor: pointer;'></a>",
        link: function (scope, element, attributes, parentController) {
            element.on("click", function () {
                parentController.act(this.innerText);
            });
        }
    }
});

And in my HTML I use it thus:

<sample id="myElement">
    <item>1</item>
    <item>2</item>
</sample>

Which will be rendered as:

<div ng-transclude="" id="myElement">
    <a ng-transclude="" style="display: inline-block; border: 1px solid crimson; margin: 2px; padding: 5px; color: crimson; text-decoration: none; background: #f5d0d0; cursor: pointer;;display: inline-block; border: 1px solid crimson; margin: 2px; padding: 5px; color: crimson; text-decoration: none; background: #f5d0d0; cursor: pointer;" class="ng-scope"><span class="ng-scope">1</span></a>
    <a ng-transclude="" style="display: inline-block; border: 1px solid crimson; margin: 2px; padding: 5px; color: crimson; text-decoration: none; background: #f5d0d0; cursor: pointer;;display: inline-block; border: 1px solid crimson; margin: 2px; padding: 5px; color: crimson; text-decoration: none; background: #f5d0d0; cursor: pointer;" class="ng-scope"><span class="ng-scope">2</span></a>
</div>

I want to be able to listen to events triggered manually through jQuery:

$("#myElement").on("myEvent.sample", function (e, something) {
    alert("click: " + something);
});

I want this event to be triggered whenever the link is clicked.

If I set the replace property to false on the sample directive, it works. I guess it is because at the point where the event is fired, the element sample no longer exists, and as such it will have been replaced by the inner template.

So, how do I accomplish this?

Doing this, as suggested in the answer below, will not accomplish my purpose:

$($element).trigger("myEvent.sample", [something]);

link: function($scope, $element){ $element.click(function(){alert('clicked'):});} — KoIIIeY, Feb 21 '14 at 08:39

Sai · Accepted Answer · 2014-02-24T19:55:45.277

16

Please find below the fiddle

fiddle

Trigger is a jquery function which will work on proper handler.

$(element).trigger("myEvent.sample");

Hope this helps

edited Feb 24 '14 at 19:55

answered Feb 24 '14 at 19:48

Sai

2,068
19
24

Thank you very much for your efforts. For that, you will get the accept. The actual problem was in the version of jQuery I was using. I was on 2.x. Seeing your fiddle steered me in the right direction. – Milad Naseri Feb 25 '14 at 07:10
@MiladNaseri I'm not sure, if I have read you right. I have updated my fiddle with Jquery 2.x and it is working as expected.[fiddle](http://jsfiddle.net/sb_satchitanand/h49nz/1/). Did you mean was there any other issue because of the Jquery 2.x ? – Sai Feb 25 '14 at 09:11
Actually yes. I was just going over the AngularJS documentation and it specifically said that at 1.2.x they still do not support jQuery 2.x's event binding. – Milad Naseri Feb 25 '14 at 19:17

score 4 · Answer 2 · answered Feb 25 '14 at 07:17

Here's updated fiddle: http://jsfiddle.net/3u3zh/1/

There are several points worth noticing:

Because of the way angular transforms DOM, I would advice attaching all your custom listeners on body and then filter them by event target. $('body').on('myEvent.sample', 'target-selector-expr', handler) does exactly that. For example, if you use custom event listeners on ngRepeated elements, your handlers would not be executed because those elements would not exist at the time of trying to attach events to them.
It seems that angular's jqLite implementation is somewhat lacking in features when triggering events. Therefore I wrapped sample's element in jQuery ($($element)) because otherwise the additional data would not get to the handler.

Final template:

<div ng-app="myApp">
  <sample id="myElement"><item>1</item><item>2</item></sample>
</div>

Js:

var myApp=angular.module('myApp',[]);
myApp.directive('sample', function () {
    return {
        restrict: "E",
        replace: true,
        transclude: true,
        template: "<div ng-transclude></div>",
        controller: function ($scope, $element) {
            this.act = function (something) {
               $($element).trigger("myEvent.sample", [something]);
            };
        }
    };
})
.directive('item', function () {
    return {
        restrict: "E",
        require: "^sample",
        transclude: true,
        template: "<a ng-transclude></a>",
        link: function (scope, element, attributes, parentController) {
            element.on("click", function(e) {
                parentController.act(this.innerHTML);
            });
        }
    }
})

$(document).ready(function(){
    $("body").on("myEvent.sample", '#myElement', function (e, something) {
        alert('clicked: ' + something);
    });
});

Bind events on AngularJS element directives using jQuery

2 Answers2

Linked