Force refreshing

[piwel]

Is it possible to have a way to manually refresh the font-size calculation ?

Maybe via a custom event that we could trigger when we want, or by watching another special attribute, or both...

We need to use ngBindHtml , and not ngBind (that is [watched](ngBind watch) by the directive). It may also help people using the {{ ... }} notation, or after having resized the parent container.

[patrickmarabeas]

I've been mulling the idea of giving the fitTextConfigProvider an array of things to watch. Won't be able to implement this for the next ~month though unfortunately, so feel free to make a PR if you get something working in the meantime.

[andreadompe]

I use this workaround,

    <div id="containerdiv">
        <h1 data-fittext> Ciao Ciao!<h1>
    </div>

in the event resize

$compile($('#containerdiv'))($scope);

It's worked for me

[devidation]

Hi, I have been trying to create my own speeddial thing and use fittext to change the font size of the tile titles. However I've created some sliders to change to width and height of each tile. I would now like to update/trigger the directive to resize the text when i change the size of the tile. Using the above solution from andreadompe works just fine however the more it's used(the more times you change the tile size) the slower the rendering of the browser becomes. Sliding several times makes the window very laggy until you refresh the page. Is there still no other method to trigger the directive through in other ways? Thank in advance.

[patrickmarabeas]

@devidation: Debounce the call your slider makes. Have a look at how ngFitText handles the resize event if a debounce function is supplied.

[jmartinezuk]

Ok, I solved this by simply doing a $(window).trigger('resize'), which the plugins listens to, to update itself, after changing the content.

On a side note, for others that might run into this, on angular 1.5+, when updating the scope itself, I was running into the "$scope.digest already in progress" errors... I solved it by removing the scope.apply and just calling resizer() on its own: config.debounce ? angular.element(window).bind('resize', config.debounce(function(){ scope.$apply(resizer)}, config.delay)) : angular.element(window).bind('resize', function(){ resizer()}); }

[patrickmarabeas]

If you can create a demo on codepen illustrating the digest issue I'll look at fixing.

[mos379]

ran into this issue and solved it by doing small changes in the directive added if (attrs.fittextMax != undefined && maxFontSize !== attrs.fittextMax) { maxFontSize = attrs.fittextMax; } in the caclulate() function

and added scope.$eval(attrs.fittextMax), to the watch

Now I can dynamically adjust the size by adjusting it in the model and using it in the html data-fittext-max="{{vm.maxSize}}"