javascript - 使用 Angular JS 为内联 Javascript 赋值

Question

我想加载一个 Canvas 来计算用户的个人资料表。我计算了值并将其分配给 Angular 范围变量。我的 Canvas 代码在内联 javascript 中。如何在内联 javascript 中为变量赋值？

这是 Canvas 和我的 jade 文件的代码:

var ctx = document.getElementById('my_canvas').getContext('2d');
  var al= document.getElementById('my_canvas').value;
  var start = 4.72;
  var cw = ctx.canvas.width;
  var ch = ctx.canvas.height; 
  var diff;
  function progressSim(){
    diff = ((al / 100) * Math.PI*2*10).toFixed(2);
    ctx.clearRect(0, 0, cw, ch);
    ctx.lineWidth = 10;
    ctx.fillStyle = '#09F';
    ctx.strokeStyle = "#09F";
    ctx.textAlign = 'center';
    ctx.fillText(al+'%', cw*.5, ch*.5+2, cw);
    ctx.beginPath();
    ctx.arc(35, 35, 30, start, diff/10+start, false);
    ctx.stroke();
  }
  progressSim();

<!-- canvas(id="my_canvas" width="70" height="70") -->
<canvas id="my_canvas" width="70" height="70" />

还有没有更好的方法来做到这一点？

这是工作的 Plunker! https://plnkr.co/edit/5qKZ9fGY1miinouWC7Iy

Answer 1

删除内联代码并将其添加到 app.js 中，请找到更改 $scope.canvas 而不是 al

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.canvas = 70;
  var ctx = document.getElementById('my_canvas').getContext('2d');
  var start = 4.72;
  var cw = ctx.canvas.width;
  var ch = ctx.canvas.height; 
  var diff;
  function progressSim(){
    diff = (($scope.canvas / 100) * Math.PI*2*10).toFixed(2);
    ctx.clearRect(0, 0, cw, ch);
    ctx.lineWidth = 10;
    ctx.fillStyle = '#09F';
    ctx.strokeStyle = "#09F";
    ctx.textAlign = 'center';
    ctx.fillText($scope.canvas+'%', cw*.5, ch*.5+2, cw);
    ctx.beginPath();
    ctx.arc(35, 35, 30, start, diff/10+start, false);
    ctx.stroke();
  }
  progressSim();
});