paper.js angular.js 画布仅在画布鼠标悬停时更新

Question

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

但直到我在浏览器中移动鼠标后画布才会更新。在画布上绘制的函数正在立即调用，但是如果没有鼠标离开链接，画布什么也没有显示？

在指令中调用draw函数的angular.js控制器：

.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();


    }
};

});

base.html 中调用控制器函数进行绘制的菜单：

<div ng-controller=NavCtrl>
        <nav>
             <a href='#/bilgi'>bilgi</a>
             <a  ng-click="setTitle(work)" href='#/ardiye/{{work.id}}'  ng-repeat='work in works'>{{$index+1}}</a>
        </nav>

    </div>

---- 更新----

我已添加：

<script type="text/paperscript" canvas="canvas">

function onFrame(event) {

}
</script>

这个空的 onFrame 函数到 base.html，现在画布正常更新。但为什么？

Answer 1

您是否尝试过更新视图？

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

我刚刚在每个函数结束时调用了paper.view.update()，一切正常。

如果这是问题所在，则与 Angular 无关

Answer 2

将代码封装在 scope.$apply() 函数内的指令函数中。这将确保它更新 UI。

另外，在指令中约定使用scope（没有美元符号）而不是$scope。在控制器中，您实际上是在传递命名对象 $scope。 Angular 需要知道你想要注入的对象的实际名称。但是，在指令的链接函数中，实际名称并不重要。这是因为在链接属性内部，参数以特定顺序传递：scope, element, attributes。如果需要，您可以使用foo, bar, baz，但它们仍将被解析为scope, element, atttributes。

考虑到这一点，您实际上可以使用$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'
              };
            });
     }