[Question] $dragger in directives

[opes]

I'm having an issue when I use $dragger in an infinite scrolling directive. I'm using angular-mobile-nav in conjunction with angular-scrolly. When I navigate through pages, I want to attach a drag listener to a directive within one of the pages. I've trimmed my directive's link function down to just the $dragger code. However, when I navigate to the second page, the scrolling breaks, but the event listeners still fire. I have my directive's link function as follows:

link: function(scope, elem, attrs) {
    dragger = new $dragger(elem);  // Scrolling effect dies when this line hits
    dragger.addEventListener(function(dragData) {
       // My logic
    });
  }

When the $dragger call fires, the scrolling is stopped; you can no longer drag the element - it just gets stuck (for instance, when I set a $timeout on the $dragger call, the css transform style on the element will stop when $dragger hits).

What's the proper way of attaching drag event listeners on directives using scrolly?

[ajoslin]

Do you call removeListener when the element is removed?

On Thursday, August 22, 2013, opes wrote:

I'm having an issue when I use $dragger in an infinite scrolling directive. I'm using angular-mobile-nav in conjunction with angular-scrolly. When I navigate through pages, I want to attach a drag listener to a directive within one of the pages. I've trimmed my directive's link function down to just the $dragger code. However, when I navigate to the second page, the scrolling breaks, but the event listeners still fire. I have my directive's link function as follows:

link: function(scope, elem, attrs) { dragger = new $dragger(elem); // Scrolling effect dies when this line hits dragger.addEventListener(function(dragData) { // My logic }); }

When the $dragger call fires, the scrolling is stopped; you can no longer drag the element - it just gets stuck (for instance, when I set a $timeouton the $dragger call, the css transform style on the element will stop when $dragger hits).

What's the proper way of attaching drag event listeners on directives using scrolly?

— Reply to this email directly or view it on GitHubhttps://github.com/ajoslin/angular-scrolly/issues/17 .

...sent from my iPhone

[opes]

Yes, I added the removeListener method for when the element was removed and it still gets stuck. If I don't add $dragger at all, it scrolls successfully. One thing to note is that when I have $dragger in place, it affects the next page that I navigate to, not the first one. When I $navigate away from that page to a secondary page with $dragger, the scrolling breaks. However, when I $navigate.back() to the first page, the scrolling works again (on that page).

[ajoslin]

Oh, there is a problem with $dragger and elements being destroyed. Issue opened #19

[opes]

Thanks for the update. We had to workaround this issue by adding $dragger to a single directive that never got destroyed and that fixed the problem. Glad to know that it was a bug and not something that we were doing wrong. Great work on the library, by the way! It solved a lot of our problems that we had using overflow. Thanks again!

[ajoslin]

I actually looked at it, and dragger should cleanup fine when the element is destroyed. Could you try to create a minimal reproduce case in a plunkr?

[opes]

I tried to recreate it in a plunkr, but there is a good chunk of code that is needed to be able to reproduce it, if at all, so I will investigate further and see if it's something on my end instead of rebuilding the whole thing. We ended up refactoring the code so we're no longer using $dragger as we were before. I'll let you know if I can recreate it.