Question

我不知道为什么下面的代码不能正常工作？我希望当我选择图片时，对象：选中的事件被触发，我确实看到了打印输出，但是按钮上的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>

Answer 1

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

你应该用$ scope包装函数内容。$ apply（）来启动摘要周期，除了其他事项外，还会对你的范围值进行脏检查，发现buttonDisabled已被更改，并会相应地更新视图。这是如何做到的：

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

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

1 个答案: