如何在 Angular 中重新加载时重新初始化视图控制器中的$scope变量？

Question

我有一个简单的Angular web应用程序，当我重新访问路由时，我遇到了问题。在第一次访问时，路由控制器使一切正常工作。第二次访问时，事情就坏了。控制器设置视图中画布元素的尺寸。控制器的简化示例:

// app.js
var app = angular.module('noahdecocoApp', ['ngAnimate', 'ngCookies', 'ngResource', 'ngRoute', 'ngSanitize', 'ngTouch']);
app.config(function ($routeProvider) {
  $routeProvider
    .when('/particle-page', {
      templateUrl: 'views/particle.html',
      controller: 'ptclCtrl'
    })
});
// ptclCtrl.js
app.controller('ptclCtrl', function($scope){
  var canvas = document.getElementById("ptclCanvas");
  var ctx = canvas.getContext("2d");
  ctx.canvas.width  = 500;
  ctx.canvas.height = 500;
});
//particle.html
<canvas id='ptclCanvas'></canvas

第一次运行时，效果很好。第二次执行时，画布将重置为其原始默认值。我不知道为什么会这样?我做错了吗，有没有Angular的方法来做到这一点?我要做的第二件事是添加和动画粒子，我无法实现，因为我怀疑同样的问题，我的数组变量只在第一次加载时初始化。任何帮助都是感激的，我已经尝试了几个星期的解决方案!

Answer 1

这根本不是Angular。在angular中，你永远不会(跟我重复一遍)在控制器中做DOM操作。如果你发现自己也在这样做，那就不要这样做。

DOM操作在指令中完成，所以你可以这样做:

app.directive('resizeCanvas', function() {
  return {
    link: function(scope, element, attrs) {
      var ctx = element[0].getContext("2d");
      ctx.canvas.width  = 500;
      ctx.canvas.height = 500;
    } 
  };
});

然后:

<canvas resize-canvas></canvas>

这将为您调整大小，不涉及控制器

Answer 2

将只需要执行一次的逻辑放在运行块或配置中。这样它只初始化一次

执行顺序:

app.config()
app.run()
app.controller() 
var app = angular.module('myApp',[]);
app.run(function() {
});