AngularJS und Canvas reagiert nicht auf Änderungen

Question

Ich erstelle einen AngularJS 1.6-Prototyp und für eine Komponente, die ich erstelle, muss ich ein HTML5-Canvas verwenden, das das Datenmodell, ein Array von Spielern, darstellt.

Ich konnte es wie ein Videospiel funktionieren lassen (Schleife mit Update und Draw Calls) und es funktioniert richtig, aber heute wollte ich eine Liste von Spielern neben der Leinwand mit einer ng-Wiederholung zeigen und es tut nicht arbeiten.

Durch die Tests, die ich getan habe, scheint AngularJS diesen Schub im Array nicht bewusst zu sein und es aktualisiert das DOM nicht, denn wenn ich etwas anderes in der App mache, das das DOM ändert, dann erscheint die Liste. Was mache ich falsch?

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

Ok, ich habe gefunden, was falsch war. Es war BASIC, aber aus diesem Grund habe ich es nicht gesehen.

sehen: $ctrl.field.addEventListener("mousedown", $ctrl.mousedown, false);

das ist das Problem, ich habe ng-mousedown="$ctrl.mousedown($event)" auf das Canvas-Element hinzugefügt und es funktioniert wie erwartet.