AngularJS 和 Canvas 没有响应更改答案

【问题标题】：AngularJS and Canvas not responding to changesAngularJS 和 Canvas 没有响应更改
【发布时间】：2017-08-07 22:39:37
【问题描述】：

我正在创建一个 AngularJS 1.6 原型，对于我正在创建的一个组件，我需要使用一个 HTML5 Canvas 来表示数据模型，即一组玩家。

我已经能够让它像电子游戏一样工作（循环更新和绘制调用）并且它可以正常工作，但是今天我想在画布旁边显示一个玩家列表，并带有 ng-repeat 并且它没有工作。

通过我所做的测试，AngularJS 似乎不知道数组中的推送并且它不会刷新 DOM，因为如果我在应用程序中执行其他更改 DOM 的操作，则会出现列表。我做错了什么？

function TaggingPlaySituationController() {
    this.$onInit = function () {
        $ctrl.field.addEventListener("mousedown", $ctrl.mousedown, false);

        window.requestAnimationFrame($ctrl.loop);
    }

    this.mousedown = function (evt) {
        player = new Player($ctrl.resourceManager, $ctrl.mouse.x, $ctrl.mouse.y, Math.ceil(Math.random() * 10));
        $ctrl.players.push(player);
    }

    this.loop = function () {
        var now = Date.now();
        var dt = now - $ctrl.lastUpdate;

        $ctrl.lastUpdate = now;

        $ctrl.update(dt);
        $ctrl.draw();
        window.requestAnimationFrame($ctrl.loop);
    };
}

function CanvasObject(resourceManager, x, y, width, heigth) {
    this.resourceManager = resourceManager;
    this.x = x;
    this.y = y;
}

function Player(resourceManager, x, y, dorsal) {
    CanvasObject.call(this, resourceManager, x, y, 18, 18);
    this.dorsal = dorsal;
}
Player.prototype = new CanvasObject;
}

【问题讨论】：

标签： javascript angularjs html canvas

【解决方案1】：

好的，我找到了问题所在。它是 BASIC，但由于这个原因我没有看到它。

看到这个：$ctrl.field.addEventListener("mousedown", $ctrl.mousedown, false);

这就是问题所在，我已将 ng-mousedown="$ctrl.mousedown($event)" 添加到画布元素中，它按预期工作。

【讨论】：