Closed lukszy closed 9 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.
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!
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.
See version 0.8.0 and updated README for support
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?