Javascript 如何从angular更新HTML5画布？

我有一个画十字的小画布和一个控制旋转角度的输入框

 <input type='text' ng-model='angle'>
    <canvas id="myLitleCanvas" width="200" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myLitleCanvas');
      var context = canvas.getContext('2d');
      context.save();

      context.translate(100, 100);
      context.rotate({{angle}} * Math.PI / 180.0); // <---- problem
      context.translate(-100, -100);

      context.beginPath();
      context.moveTo(100, 0);
      context.lineTo(100, 200);
      context.moveTo(0, 100);
      context.lineTo(200, 100);
      context.stroke();
    </script>

---

但是当文本框中的值更改时，我似乎无法访问

角度
或重新绘制画布。这可能吗？
javascript块中没有令牌替换。执行DOM操作的推荐方法是将javascript代码放入指令中。然后，您将拥有一个引用“角度”参数的属性。您可能希望了解有关执行自定义UI指令的想法。希望这有帮助。
如前所述，javascript块中没有代币替换

要使其正常工作，请使用控制器从脚本块中移动代码。只需通过
$scope.angle
访问角度即可。您还可以编写一个
rotateandreaw
函数并绑定到
ng click
或其他任何内容：

$scope.rotateAndRedraw = function (angle) {
      context.clearRect(x,y,width,height);
      context.translate(100, 100);
      context.rotate(angle * Math.PI / 180.0);
      context.translate(-100, -100);

      context.beginPath();
      context.moveTo(100, 0);
      context.lineTo(100, 200);
      context.moveTo(0, 100);
      context.lineTo(200, 100);
      context.stroke();
};

您还可以将所有这些画布代码包装在一个指令中，并轻松地在一个页面上多次复制画布。
据我所知，angular不处理脚本，因此您的
{{angle}
无效。
$scope.rotateAndRedraw = function (angle) {
      context.clearRect(x,y,width,height);
      context.translate(100, 100);
      context.rotate(angle * Math.PI / 180.0);
      context.translate(-100, -100);

      context.beginPath();
      context.moveTo(100, 0);
      context.lineTo(100, 200);
      context.moveTo(0, 100);
      context.lineTo(200, 100);
      context.stroke();
};