3

I have a slider, something like this:

 <md-slider aria-label="text size" step="1"
            ng-change="text.setProperty('fontSize', fontSize)"
            ng-model="fontSize" min="1" max="100">
 </md-slider>

Two texts are added to canvas. This is how I get properties of selected text:

canvas.fabric.on('object:selected', function(object) {
    if (object.target instanceof fabric.Text) {
        console.log(object.target);
    }
});

object.target returns an object with properties something like this: object.target.fontSize:126 and of course this for both objects are different.

How to easily update the model (the input field with the font size value) so that it would display a font size based on the selected object. Right now it shows the same value if I select any of the text objects. Thanks!

georgeawg
  • 48,608
  • 13
  • 72
  • 95
funguy
  • 2,072
  • 7
  • 30
  • 41

1 Answers1

1

You need to call $apply() to trigger the $digest cycle so that your value updates in the view.

You can set the value of fontSize in your controller followed by $scope.$apply() like so: 

canvas.fabric.on('object:selected', function(object) {
    if (object.target instanceof fabric.Text) {
        console.log(object.target);
        $scope.fontSize = object.target.fontSize;
        $scope.$apply();
    }
});
cnorthfield
  • 3,384
  • 15
  • 22