raw JS event does not trigger ng-disabled change

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

  •  19-07-2023
  •  | 
  •  

Pregunta

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>
¿Fue útil?

Solución

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);
  });
});
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top