如何将数据从角度控制器传递到JavaScript或Paper.js

如何通过JavaScript将数据从角度控制器传递到Paper.js

这是一个与前一个问题几乎相同的问题：

前一个问题的第一个答案对我不适用（我在下面展示），我也不清楚第二个答案（这也是一个解决办法）

编辑：我想出了一个有点俗气的解决方案，允许传递值 从角度到Javascript：我知道这不是角度的方式 可能还有其他一些缺点（我非常乐意有这些缺点） 他们大声喊道——我在下面的回答中展示了这一点）

两年后，现在有新的答案吗

也许有一种paper.js直接方法？（前面的问题与paper.js无关）

我的代码和情况详情如下：

// snippet frome angular controller named "colorSelector"

 $scope.xCoor = image.xCoor; 
 $window.xCoor = image.xCoor; //hoped this would work but doesn't


//angular works fine in the html


  <p> {{description}}</p>
  <p>{{xCoor}} is the X coordinate, {{yCoor}}</p>

//来自名为“colorSelector”的角度控制器的代码段
$scope.xCoor=image.xCoor；
$window.xCoor=image.xCoor//希望这能起作用，但没有
//angular在html中工作良好
{{description}}

{{xCoor}}是X坐标，{{yCoor}

编辑：删除了ng repeat包装，因为它并没有直接应用于问题。（第二次编辑进一步清理了它）

//paper.js已成功访问全局js变量，但
//我无法将角度信息输入JavaScript变量
targetX=250；targetY=270//硬连线工作（我只使用x为例）
//targetX={{image.xCoor}}不工作（毫不奇怪）
//targetX=window.xCoor//我以为这样行吗？但事实并非如此
//下面来自先前S.O.问题的建议不适用于我
//targetX=angular.element（document.querySelector（'[ng controller=“colorSelector”]'）.scope（）.xCoor
//如果在上面设置了变量，则“下面”起作用
var target=新路径。圆({
中间：[targetX，targetY]，
半径：10，
strokeColor：“白色”
});

---

如果前一个问题第二个答案的“变通”方法仍然有效，有人能为我充实一下吗？（他们建议插入一个带有脚本标签的字符串？

我想出了一个简单的解决办法（不知道为什么花了这么长时间），我知道这不是一种角度的方式，可能还有其他一些缺点（我非常乐意让他们说出来）

//未显示的角度模块定义$scope.xCoor
{{x-coor}}
var targetX=num（getElementById（“x-coor”）.html）

我想出了一个简单的解决办法（不知道为什么花了这么长时间），我知道这不是一个角度的方法，可能还有其他一些缺点（我非常乐意让他们说出来）

//未显示的角度模块定义$scope.xCoor
{{x-coor}}
var targetX=num（getElementById（“x-coor”）.html）

我认为问题在于执行顺序，您需要延迟paperscript执行，直到angular应用程序设置变量。还有一件事，在控制器中，您可以从“图像”中获得值，但似乎您有一个数组“图像”来欣赏这些想法。我的实际用例涉及一次更改一张画布。我在本例中留下了“图像中的图像”，因为我就是这样创建了一个缩略图菜单的，只要点击一下，就会调用一个角度函数来改变当前图像。这个特定的paper.js工具的工作方式是将图像从图像标签id拉到画布上。我的目标是使用该角度函数将覆盖在图像上的圆的x和y坐标更改为每个单独图像的存储值。-更多信息：调用角度函数时，画布图像确实会发生更改。但是，它确实需要在画布上进行第二次鼠标移动以显示新照片（角度函数导致最后一个消失，模糊使新的在实际画布上可见）。包括这一点，因为它可能会提示您怀疑的时间。第二个问题我可能想问（但一次一个？）是如何强制paper.js函数由角度函数中的某个东西触发。你能提供一个关于plunkerI的示例吗？我很难让这个plunker与角度函数和画布一起工作。我相信我会很快修复它。也许部分代码会让你看到我做得更好。我认为问题的顺序是执行时，您需要延迟paperscript的执行，直到angular应用程序设置变量。还有一件事，在控制器中，您从“图像”中获得值，但似乎您有一个数组“图像”。请欣赏我的想法。我的实际使用案例包括一次更改一张画布图片。我将“图像中的图像”保留在“图像中”在这个例子中，我就是这样创建了一个缩略图菜单，点击一次就会调用一个角度函数来改变当前的图像。这个特定的paper.js工具的工作方式是将图像从图像标签id拉到画布上。我的目标是使用这个角度函数来改变覆盖在t上的圆的x和y坐标将图像转换为每个单独图像的存储值。-更多：调用角度函数时，画布图像会发生变化。但是，它会在画布上进行第二次鼠标移动以显示新照片（角度函数会导致最后一张照片消失，模糊会使新照片在实际画布上可见）.包括这一点，因为它可能会建议您所怀疑的时间。第二个问题我可能想问（但一次只问一个？）是如何强制paper.js函数由angular函数中的某个东西触发。你能提供一个plunkerI的示例吗？我很难让这个plunker与angular和canvas一起工作。我相信我会很快修复它。也许部分代码会让你看到我做得更好。

//paper.js successfully has access to global JS variables, but
//I cannot get angular information into the JavaScript variables
<script type="text/javascript">
  targetX = 250; targetY=270; //hardwired works (I'm only using x for example)

  // targetX = {{image.xCoor}} doesn't work (no surprise)
  // targetX = window.xCoor // I thought this might work? but it doesn't
  // suggestion below from earlier S.O. question doesn't work for me
  // targetX =  angular.element(document.querySelector('[ng-controller="colorSelector"]')).scope().xCoor
    </script>

<!-- paper.js section below -->
<script type="text/paperscript" canvas="myCanvas">
    //below works if variables are set above
    var target = new Path.Circle({
      center: [targetX, targetY],
      radius: 10,
      strokeColor: "white"
    });
</script>

// un-shown angular module defines $scope.xCoor

<div id="xCoor" class="hide-me-offscreen">
  {{x-coor}}
</d>

<script type="text/javascript" >
  var targetX = num(getElementById("x-coor").html)
</script>