AngularJS 错误：无法找到指令“绘图”所需的控制器“绘图”

Question

我收到上述错误。我需要帮助修复它。我查看了this question，它似乎对我一点帮助都没有，我在与需要它的指令相同的元素上有所需的指令。我也不明白为什么我的错误说找不到指令“绘图”所需的控制器“绘图”。不应该说指令'canvasSizer'需要'绘图'控制器吗？

这是我的简化代码，完整代码参见 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

正如 Sunil 评论的那样，简单的答案是，当您 require 一个指令时，您要求将其控制器作为第四个参数（而不是第三个，如您的代码中的参数）传递给您的链接函数。

既然你想在drawingCtrl 上使用resize 属性，你应该给你的绘图指令一个控制器并将这个功能移到那里。请参阅此处的“创建通信指令”： https://docs.angularjs.org/guide/directiveAs

Answer 2

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

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

这也丢失了：

img.src=data;

看看，希望对你有帮助！