AngularJSとCanvasが変更に応答しない

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

私は間違っていたことを発見しました。それはベーシックでしたが、その理由から私はそれを見ていませんでした。 $ctrl.field.addEventListener("mousedown", $ctrl.mousedown, false);問題があります

、私はcanvas要素ng-mousedown="$ctrl.mousedown($event)"に追加したと予想されるとして、それが働いている：

が、これは参照してください。