0

I need to track if top 300 pixels my subview have scrolled out of the visible area, however I cannot bind to a scroll event of this view (but can bind to 'resize'!)

Location: index.html -> global layout -> content area -> subview (this one)

    .state('my', {
        url: '/my',
        views: {
            '': {
                    templateUrl: 'app/views/layout.html'
                },
            'content': {
                    templateUrl: 'app/views/content.html' <-- inside this view we have ng-view, with my subtemplate loaded into it.
                }
            },

Important: this is not a windowed / limited height view. It has a header, but no footer, i.e. can be any length depending on the contents length.

Please help! D.

Update

I've found the following workaround. Please let me know how ugly is that from AngularJS point of view?

var el = angular.element(document.getElementById('top'));

    $scope.$watch(function () {
        $timeout(function () {
            var top = el[0].getBoundingClientRect().top;
            if (top < -160) {
                // Doing this
            } else {
                // Doing that
            }

        });
    });
oharlem
  • 1,030
  • 7
  • 12
  • any special reason why you can' t bind a scroll event ? – topheman Jul 23 '15 at 22:03
  • @topheman The only suspicion is this amount of nested views + fact of using material design. Btw. I have an update - found a workaround: will update the ticket above. – oharlem Jul 24 '15 at 02:29

0 Answers0