using jScrollPane with ng-repeat

[rte...@gmail.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]

Hi,

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

[gluteus maximus]

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]

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]

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]

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]

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]

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.

Visit this group at http://groups.google.com/group/angular?hl=en-US.
 
 

--

Josh Kurz

http://dillingermediaonline.com

[simone radice]

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]

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]

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]

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]

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

[Rahul Jain]

/**

 * 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: