Question

我收到了上述错误。我需要帮助修复它。我已经查看了this question，它似乎对我没有任何帮助，因为我需要与指令要求相同的元素。我也不知道为什么我的错误表明控制器＆＃39;绘图＆＃39;，指令＆＃39; drawing＆＃39;，无法找到。不应该说＆＃39;绘图＆＃39;指令＆＃39; canvasSizer＆＃39;

需要控制器

以下是完整代码的简化代码，请参阅plnkr。

angular.module("drawingDirective", [])
.directive("drawing", function(){
  return {
    restrict: "A",
    scope: {},
    link: function(scope, element){
      var canvas = element[0];
      var ctx = canvas.getContext('2d');
      var $canvas = $(canvas);

      this.resize = function () {
        // save the canvas content as imageURL
        var data=canvas.toDataURL();

        // resize the canvas
        canvas.width*= window.innerWidth;
        canvas.height*= window.innerHeight;

        // scale and redraw the canvas content
        var img=new Image();
        img.onload=function(){
            ctx.drawImage(img,0,0,img.width,img.height,0,0,canvas.width,canvas.height);
        }

      };

    }
  };
})
.directive("canvasSizer", function () {
  return {
    restrict: "A",
    require: "drawing",
    link: function(scope, element, drawingCtrl){

    //first call of tellAngular when the dom is loaded
    document.addEventListener("DOMContentLoaded", drawingCtrl.resize, false);

    //calling tellAngular on resize event
    window.onresize = drawingCtrl.resize;

    }
  };
});

我的html引导应用程序并在其中包含以下div。

<canvas drawing canvas-sizer></canvas>

以下是我一直在努力的plunker。

Answer 1

工作（我认为）你的傻瓜：http://plnkr.co/edit/sEZCyyC8dZOTo2LWcdc9?p=preview

更改了一些内容，将大部分链接内容移动到控制器中以支持将其暴露给其他指令。稍微更改了缩放功能（对于新的画布大小，它正在做* =）

这也不见了：

img.src=data;

检查出来，希望有所帮助！

Answer 2

正如Sunil评论的那样，简单的答案是当你require一个指令时，你要求它的控制器作为第四个参数传递给你的链接函数（不是第三个参数），如你的代码所示。 / p>

由于你想在drawingCtrl上使用resize属性，你应该给你的绘图指令一个控制器并在那里移动这个功能。请参阅＆＃34;创建通信指令＆＃34;这里： https://docs.angularjs.org/guide/directiveAs

AngularJS错误：无法找到指令'drawing'所需的控制器'drawing'

2 个答案: