yads / ngTinyScrollbar

An angular directive port of the TinyScrollbar
MIT License
55 stars 20 forks source link

dynamic height update #2

Closed lukszy closed 9 years ago

lukszy commented 10 years ago

Hi, love your work man :) The problem is that the plugin is not updating when the inner height has changed, it updates on window resize (only?). Can You help me with this?

yads commented 10 years ago

So this is something that is in the pipeline, but is not trivial to solve. This is due to the fact that there is no resize event on elements. You can use it in your own directives and manually call update. For example you could watch on model change and update the scrollbar.

<div class="my-scrollable" scrollbar>{{model}}</div>
angular.module('myDirectives', [])
    .directive('myScrollable', function() {
         return {
              restrict: 'C',
              require: 'scrollbar',
              link: function(scope, element, attrs, scrollbar) {
                  scope.$watch('model', function() {
                        scrollbar.update();
                  });
              }
         };
     });

Or you could make your own height listener and update the scrollbar. Feel free to submit a pull request if you have a good universal strategy.

tomasszabo commented 9 years ago

I've similar problem. The content of my div (with scrollbar directive attached) contains other Angular directives, lists, etc. Therefore the inner height changes after the directive is processed (i.e. in other cycles of $digest).

I needed to add following piece of code to the link function of scrollbar directive:

          scope.$watch(function() {
                $timeout(function(){
                    var $overview = angular.element(iElement[0].querySelectorAll('.scroll-overview')[0]);
                    var newValue = $overview.prop('scrollHeight');
                    var oldValue = scope.oldValue;

                    if (newValue !== oldValue) {
                        scope.oldValue = newValue;
                        controller.update();
                    }
                }, 100, false);    
            });

Note: Pay attention to the false as the last argument of $timeout function. Without it, you'll end up in never ending loop.

You can implement it somehow in your directive or at least someone will find this piece of code when he will be facing same problem as me. Keep up the good work!

yads commented 9 years ago

Thanks, this looks like a decent addition to the plugin, likely as an optional parameter. I'll take a look at adding this to the codebase.

yads commented 9 years ago

See version 0.8.0 and updated README for support