Question

我已经使用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();


    }
};

});

我的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'
              };
            });
     }

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

2 个答案: