Question

我正在创建一个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;
}

Answer 1

好的，我发现了什么问题。这是BASIC，但由于这个原因，我没有看到它。

请参阅：$ctrl.field.addEventListener("mousedown", $ctrl.mousedown, false);

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

AngularJS和Canvas没有响应更改

1 个答案: