Question

我有一个简单的Angular webapp，当我重新访问一条路线时，我遇到了问题。在第一次访问时，路线的控制器使一切正常。第二次访问，事情破裂了。控制器在视图中设置canvas元素的尺寸。一个精简的控制器示例：

// 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的方法呢？我要做的第二件事是添加和动画我无法实现的粒子因为我怀疑同样的问题，我的Array变量只在第一次加载时初始化。感谢任何帮助，我一直试图找到解决方案几周！

Answer 1

这根本不是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() {
});

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

2 个答案: