为什么加载第二次与ngRoute当这个画布挂动画？(Why this canvas animatio

问题

我使用的是太空侵略者画布动画作为我找不到404页。它的工作非常细，当用户被重定向到它的第一次，但如果用户被重定向第二次动画挂起。

演示

我创建了一个Plunker例子来说明这个问题。该页面始于/位置加载home.html的。如果你点击“重定向到/ 404”，地点将改为/404和404.html将被载入。游戏动画将运行没有问题。

但是，如果你回到/ （点击链接），然后再返回到/404 ，动画将被绞死。此外，帧每秒将从60fps下降到10fps的。

码

该演示用AngularJS构建和我切换使用ngRoute像以下页面：（没有什么特别在此）

$routeProvider.
    when('/', {
        templateUrl: 'partials/home.html',
        controller: 'HomeCtrl'
    }).
    when('/404', {
        templateUrl: 'partials/404.html',
        controller: '404Ctrl'
    });

在Home.html中只包含指令和404.html包含canvas元素：

<canvas id="game-canvas" width="600" height="400"></canvas>

的角控制器启动动画调用initInvaders404(); 。此功能手柄game.js中定义。该game.js完成即只要404.html页面加载执行画布动画代码。

我已经尝试过

第一个猜测：该问题可能与画布使用其ID正在启动有关。当我重新创建404.html，动画连接与之前的ID，但无法与新的ID。为了测试这个，我已经创造了另一个Plunker ，并用类似的方法测试的另一个动画（蓝色矩形移动）。它做工精细，所以也许这不是问题。

第二猜想：执行附加到画布的动画代码只有一次，这就是为什么它不工作第二次。为了测试这一点，我已经放在game.js和处理，game.js代码控制器内。不幸的是，同样的问题。 Plunker

第三个猜想：ngRoute与canvas元素搞乱。为了测试这一点，我已经放在画布元素出ngView和控制ngShow隐藏/显示画布上。通过这种方法，问题解决了。所述initInvaders404(); 可以多次调用，但它始终围绕在相同的元素，它永远不会被重建。 Plunker 。

题

为什么这个动画不能执行两次？

注1：我不想解决方法解决方案（我已经找到了一个在我的第三个猜测）。我想保持canvas元素的404.html文件中。

注2：这个问题是不是一个“请，调试我的代码”（因为game.js有2000行代码）。如果有一个帆布属性或ngRoute行为可能会导致此我想了解的是。

我发现，它可以执行动画第二次，但只有第一个动画结束。在这种情况下，在比赛结束后与结束onWin()或onLoose()事件。

当ngRoute改变了看法，canvas元素被破坏，但比赛仍然循环在后台运行（因为我已经使用了一些确定console.log() 当我尝试相同的游戏循环连接到相同的画布ID，它挂起。

所用的解决方法是赶上$locationChangeStart事件和帆布破坏之前停止动画。当我需要执行游戏第二次，它会运行： Plunker 。

获取$locationChangeStart事件：

ctrls.controller(
  'MyRootController',
  function($location, $rootScope) {
    $rootScope.$on("$locationChangeStart", function(event, next, current) { 
        var contains404 = current.includes("404");

        if (contains404) { // if current is 404, next will be something else
          stopInvaders404(); // code to stop the game loop before destroying the canvas
        }
    });
  }
);

但是，对于第三方的动画，不涉及改变动画代码最简单的解决方案（我用做stopInvaders404()是在画布上放置了的ngView并控制其可见性： Plunker 。