原始 JS 事件不会触发 ng-disabled 更改答案

【问题标题】：raw JS event does not trigger ng-disabled change原始 JS 事件不会触发 ng-disabled 更改
【发布时间】：2014-06-28 12:00:43
【问题描述】：

我不知道为什么下面的代码不能正常工作？我希望当我选择图片时，会触发 object:selected 事件并且我确实看到了打印输出，但是按钮上的 ng-disabled 状态没有改变？切换复选框确实正确切换按钮的禁用。任何原因？我们是否需要发射任何特定的东西来制作角度“重新渲染”？谢谢

<!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>

【问题讨论】：

标签： javascript angularjs fabricjs

【解决方案1】：

事件侦听器是一个 jquery 事件，因此您的函数不会在角度上下文中调用。

您应该使用 $scope.$apply() 包装函数内容以启动摘要循环，其中将执行对您的范围值的脏检查，将发现 buttonDisabled 已更改，并将相应地更新视图。操作方法如下：

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

【讨论】：