gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 12:39:17 25 4
gpt4 key购买 nike

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

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

最佳答案

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

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

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

关于javascript - 原始 JS 事件不会触发 ng-disabled 更改,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23586752/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com