Multiple directives for the same module in angular

Question

I've created a module for my angular app, and I have two similar directives that I have associated with both.

One (whenScrolled) is triggered when the scroll reaches the bottom of the page for infinite pagination. The other (fromTop) triggers either a "top" or "bottom" that can be used to hide/show a "go to top" link on the page. This is how I have them set up:

angular.module('scroll', []).directive('fromTop', function() {
  return function(scope, element, attributes) {
    var raw = element[0]
    var scrollDistance = Math.round(window.outerHeight)

    window.onscroll = function() {
      console.log(window.pageYOffset, raw.scrollHeight + scrollDistance)
      if (window.pageYOffset >= raw.scrollHeight + scrollDistance) {
        scope.position = 'bottom'
        scope.$apply(attributes.fromTop)
      } else {
        scope.position = 'top'
        scope.$apply(attributes.fromTop)
      }
    }
  }
}).directive('whenScrolled', function() {
  return function(scope, element, attributes) {
    var raw = element[0]
    var scrollDistance = Math.round(window.outerHeight)

    window.onscroll = function() {
      //console.log(window.pageYOffset, raw.scrollHeight - scrollDistance)
      if (window.pageYOffset >= raw.scrollHeight - scrollDistance) {
        scope.$apply(attributes.whenScrolled)
      }
    }
  }
});

Unfortunately, this isn't working. it seems that the "whenScrolled" directive is overwriting the "fromTop" one and fromTop never gets called. However, if I delete "whenScrolled", "fromTop" gets called just fine. Why is this?

TheHippo · Accepted Answer · 2013-05-06 18:04:00Z

2

This has nothing to do with angular.js at all.

Your problem: You overwrite the window.onscroll function every time you attach a directive to a DOM element, which has the effect that only the last of you applied directives will work. There can only be one onscroll function.

You need to work around this limitation some how:

Using a angular service which add captures the onscroll and then propagate the changes to all your directives.
Use a JavaScript library which does the same.
After some digging the third option: Angular has bind function which does the same. As option 2.

answered May 6, 2013 at 18:04

TheHippo

63.3k15 gold badges77 silver badges101 bronze badges

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

Collectives™ on Stack Overflow

Multiple directives for the same module in angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related