Angular directive with jquery event only firing once

Question

I have a directive that only fires once and only when you start on the page with the directive.

What am I doing wrong?

HTML -

<div class="body">
    <a href="#/systems"><div class="viewBySys"></div></a>
        <div ng-view class="container reveal-animation"></div>
    <a href="#/applications"><div class="viewByAppl"></div></a>
</div>

<script type="text/ng-template" id="appls.html">
        <div sample class="appls myElement" ng-repeat="app in appData">
            <a href=#/applications/{{app.uri}}>
                <div>
                    <img ng-src="{{app.imageS}}"/>
                    {{app.name}}
                </div>
            </a>
        </div>
</script>

JS -

app.directive('sample', function () {
return {
    restrict: 'A',
    transclude: false,
    link: function (scope, element, attributes) {
        element.on('click', function () {
            $(element).trigger("myEvent.sample");
        });
    },
};
});

$(document).ready(function () {

$('img').on('dragstart', function (event) { event.preventDefault(); });

$(".myElement").on("myEvent.sample", function (e) {
    alert('clicked!');
    console.log("made it");
});

});

I'd like to think that I am using directives correctly, but I am fairly new to Angular and I'm sure I'm using it incorrectly with Jquery.

Reactgular · Accepted Answer · 2014-12-18 18:36:31Z

3

Try adding the following to your document.ready(..) function.

console.log('sample count: '+$(".myElement").length);

I think you'll find that it prints sample count: 1 to the console.

In your template you have

<div sample class="appls myElement" ng-repeat="app in appData">

The ng-repeat directive creates additional DOM elements, but this happens during an Angular digest cycle. Which is happening after the document ready is executed.

If you want to broadcast custom jQuery events from AngularJS. Pick a DOM element that you know exists.

In your directive change to this

  $('body').trigger('myEvent.sample', $(element));

Now you can catch the event elsewhere in your JavaScript.

  $('body').on('myEvent.sample',function(event, element){
      console.log("made it");
      console.log(element); // the argument for the event.
  });

edited Dec 18, 2014 at 18:36

answered Dec 18, 2014 at 18:18

Reactgular

55.1k24 gold badges175 silver badges219 bronze badges

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

2 Comments

Xogle Over a year ago

When you say I should destroy the event, I should do this in my controller, correct?

Reactgular Over a year ago

@Xogle ignore that and I removed it from my answer. When you bind an event listener to something outside of the directive. You have to unbind it when $destroy is called, but I forgot you were calling trigger and not binding anything.

Collectives™ on Stack Overflow

Angular directive with jquery event only firing once

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related