raw JS event does not trigger ng-disabled change

StackOverflow https://stackoverflow.com/questions/23586752

  •  19-07-2023
  •  | 
  •  

Frage

I dont know why below code does not work properly? I was hoping when I select the the picture, the object:selected event is fired and I do see the print out, however the status of ng-disabled on the button does not change? the Toggle checkbox does properly toggle the button's disable though. any reason? do we need to fire anything specific to make angular 'rerender'? thanks 

<!doctype html>
<html lang="en" ng-app="testApp">
<head>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.js"></script>
  <script src="//fabricjs.com/lib/fabric.js"></script>
<script>
var app = angular.module('testApp', []);
app.controller('mainController', function($scope) {
  $scope.buttonDisabled = true;
  $scope.canvas = new fabric.Canvas('c');
  fabric.Image.fromURL("http://lh3.ggpht.com/WDiCN0jYNq_OfzjMwu07XJ9KWOa5AuMxeojLCgTrjCeAtBNd1AKAglIrJBNHbynsFY2HCE-gtOZQVrpN0eG7thFmydfv0STKREJhWaeklg=s660" , function (img ){
    $scope.canvas.add(img);
  }, {crossOrigin:"anonymous"});

  $scope.canvas.on( 'object:selected', function() {
    $scope.buttonDisabled = !$scope.buttonDisabled;
    console.log("IsDisabled:", $scope.buttonDisabled);
  } )

});
</script>
</head>

<body ng-controller="mainController">
<canvas id="c" width="800" height="500"></canvas>
Toggle<input type="checkbox" ng-model="buttonDisabled"><br/>
<button ng-disabled="buttonDisabled">Button</button>

</body>
</html>
War es hilfreich?

Lösung

The event listener is a jquery event so your function isn't called within angular context.

You should wrap the function content with $scope.$apply() to start digest cycle which will perform, among other things, dirty check for your scope values, will find that buttonDisabled was changed and will update the view accordingly. Here's how to do it:

$scope.canvas.on( 'object:selected', function() {
  $scope.$apply(function () {
      $scope.buttonDisabled = !$scope.buttonDisabled;
      console.log("IsDisabled:", $scope.buttonDisabled);
  });
});
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top