using jScrollPane with ng-repeat

2,581 views
Skip to first unread message

rte...@gmail.com

unread,
Jul 6, 2012, 12:15:42 PM7/6/12
to ang...@googlegroups.com
Hi,

I'm trying to use http://jscrollpane.kelvinluck.com/ with ng-repeat. It's a div scroller. However, I need to initialize it after the size of the div.contents() is known -- i.e., after ng-repeat is done inserting elements.

Is there an event that ng-repeat emits/broadcasts after it finishes DOM manipulation?

THanks.

tristan....@gmail.com

unread,
Aug 31, 2012, 12:16:14 PM8/31/12
to ang...@googlegroups.com, rte...@gmail.com
Hi,

I try to do the same.
Did you find solution for broadcast an event at the end of ng-repeat ??? 

gluteus maximus

unread,
Jan 23, 2013, 11:15:38 PM1/23/13
to ang...@googlegroups.com
I'm running into the same issue but I think it should be possible if you can test the number of elements in ng-repeat to the ng-repeat array and callback jscollpane when they match. If it's inside a $watch it should update. I'll post the code if I can get it to work.

Stephen Pitchford

unread,
Jan 24, 2013, 1:15:57 AM1/24/13
to ang...@googlegroups.com
Hey,

Assuming you are using a directive to initialize the plugin. Have you tried using $last which is produced by ng-repeat. You could past $last into the directive and check for when its true. It would possibly let you know when the last element has been iterated through and you could then initialize the plugin.

Cheers,
Steve

Peter Bacon Darwin

unread,
Jan 24, 2013, 2:02:02 AM1/24/13
to ang...@googlegroups.com

This may work but probably only in the first digest. In subsequent digests it may be that the last item never changes even though the overall length does.

Pete
...from my mobile.

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en-US.
 
 

Stephen pitchford

unread,
Jan 24, 2013, 2:15:03 AM1/24/13
to ang...@googlegroups.com
Yes, Peter has a valid point. Checking $last would only work after the first digest since you may be modifying the array in some other place.

gluteus maximus

unread,
Jan 24, 2013, 11:14:29 PM1/24/13
to ang...@googlegroups.com
I got it to work with the following:

--- in controller ---

$scope.scrollPane = function() {
   $('scrollDiv').jScrollPane();
}

--- in directive ---

return function(scope , element , attrs) {
   scope.$watch(element.myDirective , function() {
      scope.scrollPane();
   }
}

I'm new to Angular JS so there may be a better way, but its a start

thanks
chris

Josh Kurz

unread,
Jan 25, 2013, 12:04:11 AM1/25/13
to ang...@googlegroups.com
I got this to work by using the autoReinitialise option. Did you look at that? 


To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.

To post to this group, send email to ang...@googlegroups.com.

simone radice

unread,
Feb 15, 2013, 11:58:57 AM2/15/13
to ang...@googlegroups.com
i create a directive for scrollpane and with scope.$watch observe when the number of repeated element change. Every time the repeated element change i reinitialise jScrollPane.

appModule.directive('scrollpane',function($compile)
{
return {
restrict: 'A',
link: function(scope , element , attrs) {
element.addClass('scroll-pane');
element.jScrollPane();
var api = element.data('jsp');
scope.$watch(function(){return element.find('.'+attrs.scrollpane).length},function(length){
     api.reinitialise();
});
    }
  };
});

Dallan Quass

unread,
Feb 22, 2013, 12:52:49 PM2/22/13
to ang...@googlegroups.com
Thank you for this!

Just in case anyone is having trouble with this solution, I found that for some reason api.reinitialize() wasn't working for me, and that I needed to give the browser a chance to repaint.  So my directive looks like:


    return {
      restrict: 'A',
      link: function(scope , element , attrs) {
        scope.$watch(
          function() {return element.find('.'+attrs.scrollpane).length}, function(length) {
            // api.reinitialise() doesn't seem to work, so destroy and re-create

            var api = element.data('jsp');
            if (api) {
              api.destroy();
            }
            // give the browser time to repaint
            setTimeout(function() {
              element.jScrollPane();
            }, 0);
          }
        );
      }
    };

Dallan Quass

unread,
Feb 22, 2013, 2:21:09 PM2/22/13
to ang...@googlegroups.com
Hmm, the api.destroy() call is also causing problems for some reason - not sure what's going on. For now I removed the call to destroy().  Probably not a good idea, but I'm posting this here in case anyone else runs into similar problems.

Amerrnath Murugan

unread,
Feb 18, 2015, 1:45:24 AM2/18/15
to ang...@googlegroups.com
HI simon radice . along with your code . i just added few things which might leverage the directive . jScrollPane with addition of dynamic content. and resize on window heights
app.directive('niceScroll', [function () {
  return {
    restrict: 'A',
    transclude: true,
    template: '<div class="nice-scroll" ng-transclude></div>',
    link: function (scope, element, attb) {
      element.jScrollPane();
      var api = element.data('jsp');
      var w = $(window);
     // it will  re-initalize 
      element.bind('mouseover', function () {
        $('.jspContainer').height(w.height());
        api.reinitialise();
      });
      scope.$watch(function () {
        return {
          h: w.height()
        }
      }, function (newValue) {
        $('.jspContainer').height(newValue.h);
        api.reinitialise();
      }, true);

      w.bind('resize', function () { 
        scope.$apply();
      });
    }
  };
}]);

Rahul Jain

unread,
May 12, 2015, 10:17:37 AM5/12/15
to ang...@googlegroups.com
excellent approach got desired solution but i had to make few correction in this code
scrollpane height - element offset top so that it can get actual height instead of windows height which will be always less  than window height since element may be placed some where down the line also in this code my jscrollpane not getting intialize onload it only comes when i resized it.

(function() {
'use strict';
iqApp.directive('jscrollpane', [ function() {
function link(scope, element, attr) {

var $window = $(window);
var $element = $(element), api;

$element.jScrollPane();
api = $element.data('jsp');

//api.reinitialise();
$window.on('resize', function() {
scope.$apply();
});
scope.$watch(function() {

var _finalHeight = $window.height() - $element.offset().top;
console.log(_finalHeight);
return {
finalHeight : _finalHeight
}

}, function(newValue) {

$('.jspContainer').height(newValue.finalHeight);
api.reinitialise();
}, true);

scope.$watch(function() {
return {
finalWidth : $window.width()
}
}, function(newValue) {
$('.jspContainer').width(newValue.finalWidth);
api.reinitialise();
}, true);

}

return {
restrict : 'A',
link : link
};
} ]);
})();

thanks
Message has been deleted

Rahul Jain

unread,
May 20, 2015, 1:38:32 PM5/20/15
to ang...@googlegroups.com

/**
 * Created by Clarice on 07-05-2015.
 */
(function() {
    'use strict';
    iqApp.directive('jscrollpane', [ '$timeout', function($timeout) {
        function link(scope, element, attr) {

            var $window = $(window);
            var $element = $(element), api;

            $element.jScrollPane();
            api = $element.data('jsp');

            $window.on("resize mousemove touchstart", function onLoad() {

                var _finalHeight = $window.height() - $element.offset().top;
                $(element).find('.jspContainer').height(_finalHeight);
                api.reinitialise();
            });

            var timeout = $timeout(function() {
                //console.log('dr load timer');
                var _finalHeight = $window.height() - $element.offset().top;
                $(element).find('.jspContainer').height(_finalHeight);
                api.reinitialise();
            }, 1000);
        }

        return {
            restrict : 'A',
            link : link
        };
    } ]);
})();

On Friday, July 6, 2012 at 9:45:42 PM UTC+5:30, lost_in_the_woods wrote:
Reply all
Reply to author
Forward
0 new messages