AngularJS和Canvas没有响应变化

我正在创建一个AngularJS 1.6原型，并且对于我创建的一个组件，我需要使用代表数据模型的HTML5 Canvas，这是一个玩家数组。AngularJS和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; 
}

来源

2017-03-16 Theck

好的，我发现什么是错的。这是BASIC，但因为这个原因，我没有看到它。

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

这就是问题所在，我已经加入到canvas元素ng-mousedown="$ctrl.mousedown($event)"，它的工作如预期。

来源

2017-03-18 11:36:19 Theck

AngularJS和Canvas没有响应变化

回答

相关问题