Angularjs paper.js angular.js画布仅在画布鼠标上方更新

我已经用angular.js设置了一个应用程序。我正在通过ng repeat创建菜单。每个链接都调用一个指令中的函数，该指令使用paper.js将文本绘制到画布

但画布不会更新，直到我在浏览器周围移动鼠标。绘制到画布上的函数会立即调用，但是如果鼠标不离开链接，画布将什么也不会显示

angular.js控制器，用于在指令内调用draw函数：

.controller('NavCtrl', function($scope, $location, $http, WorkService) {
  $scope.works = [];
  $http({method: 'GET', url: '/api/v1/work'}). //collects all works
  success(function(data, status, headers, config) {
      $scope.works = data.objects;
  });
  $scope.setTitle = function(work) { 
      $scope.currentTitle=work.title;  

          $scope.writeTitle(work.title);

  };


})

angular.js指令：

.directive('draw', function () {
return {
    restrict: 'A',
    link: function postLink($scope, element, attrs) {

        $scope.writeTitle = function(inText){
            var letters = inText.split(''); 
            for(var i=0; i<2; i++){
            var text = new PointText(new Point(getRandom(0, 200), getRandom(0, 100)));
            text.content = letters[i];
            text.style = {
                fontFamily: 'Arial',
                fontWeight: 'normal',
                fontSize: 14,
                fillColor: 'red',
                justification: 'center'
            };

            }

        }



        function getRandom(min, max) {
              return Math.random() * (max - min) + min;
            }


        function initPaper() {

            paper.install(window);
            paper.setup('canvas');
        }


        initPaper();


    }
};

});

指令（'draw'，函数（）{ 返回{ 限制：“A”， 链接：函数postLink（$scope，element，attrs）{ $scope.writeTitle=函数（inText）{ 变量字母=内部文本拆分（“”）；

---

对于（var i=0；i将代码包装在

范围内的指令函数中。$apply（）

函数。这将确保它更新UI

还有一件事，它是指令中用于使用

范围的约定（无美元符号）而不是
$scope
。在控制器中，您实际传递的是命名对象$scope。Angular需要知道要注入的对象的实际名称。但是，在指令的链接函数中，实际名称并不重要。这是因为在链接属性中，参数是按特定顺序传递的：
范围、元素、属性
。如果需要，可以使用
foo、bar、baz
，但它们仍将解析为
范围、元素、属性

考虑到这一点，您实际上可以使用
$scope
，但要意识到，您可以这样做只是因为它在函数参数列表中的顺序

link: function postLink(scope, element, attrs) 

        scope.writeTitle = function(inText){
            scope.$apply(function () {
              var letters = inText.split(''); 
              for(var i=0; i<2; i++){
              var text = new PointText(new Point(getRandom(0, 200), getRandom(0, 100)));
              text.content = letters[i];
              text.style = {
                  fontFamily: 'Arial',
                  fontWeight: 'normal',
                  fontSize: 14,
                  fillColor: 'red',
                  justification: 'center'
              };
            });
     }

link：函数postLink（范围、元素、属性）
scope.writeTitle=函数（inText）{
作用域：$apply（函数（）{
变量字母=内部文本拆分（“”）；
对于（var i=0；i您是否尝试过更新视图？

我在Firefox和IE11上遇到了一个问题，在我启动一些操作后，鼠标悬停，画布才更新

我只是在每个函数结束时调用了
paper.view.update（）
，结果一切正常

如果这是问题所在，则与Angular无关
请提供您遇到问题的代码。好的。我已使用该代码编辑了我的帖子。只有当我将鼠标移到画布上时，画布才会更新。我发现在两种情况下，画布才会更新。一种是鼠标光标移到画布上时，另一种是鼠标移到画布上时光标位于body元素周围的页边距上……您可以发布用于应用“绘图”的HTML代码吗指令？这个提琴有用吗？我得到了错误：$rootScope:inprog操作已经在进行中，我已经发现我不能做内置的点和大小数学运算。paper.js文档说，如果将纸张与纯js一起使用，这是预期的行为。但是我可以在没有纸张前缀的情况下实现任何事情……我很困惑。我是不是使用paperscript还是普通js？
<script type="text/paperscript" canvas="canvas">

function onFrame(event) {

}
</script>

link: function postLink(scope, element, attrs) 

        scope.writeTitle = function(inText){
            scope.$apply(function () {
              var letters = inText.split(''); 
              for(var i=0; i<2; i++){
              var text = new PointText(new Point(getRandom(0, 200), getRandom(0, 100)));
              text.content = letters[i];
              text.style = {
                  fontFamily: 'Arial',
                  fontWeight: 'normal',
                  fontSize: 14,
                  fillColor: 'red',
                  justification: 'center'
              };
            });
     }