javascript - 如何在 Angular 中重新加载时重新初始化 View Controller 中的 $scope 变量？

Question

我有一个简单的 Angular Web 应用程序，当我重新访问路线时遇到问题。第一次访问时，路线的 Controller 使一切正常运行。第二次访问时，事情就破裂了。 Controller 设置 View 中 Canvas 元素的尺寸。 Controller 的精简示例:

// 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

第一次，效果很好。第二次， Canvas 将重置为其原始默认值。我不知道为什么会发生这种情况？我做错了吗？有没有 Angular 的方法可以做到这一点？我想做的第二件事是添加粒子并对粒子进行动画处理，但我无法实现，因为我怀疑存在同样的问题，我的数组变量仅在第一次加载时初始化。感谢任何帮助，我几周来一直在努力寻找解决方案!

Answer 1

这根本不是 Angular。在 Angular 中，你永远不会(跟我重复一遍)在 Controller 中进行 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>

这将为您调整它的大小，不涉及 Controller 。