AngularJS错误：指令“ drawing”所需的控制器“ drawing”找不到

Question

I'm getting the above error. I need help fixing it. I've looked at this question and it doesn't seem to help me at all I have the required directive on the same element as the directive requiring it. I also don't see why my error says Controller 'drawing', required by directive 'drawing', can't be found. Shouldn't it say that the 'drawing' controller is required by directive 'canvasSizer'?

Here is my code simplified for the full code see the 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;

    }
  };
});

My html bootstraps the app and has the following div inside it.

<canvas drawing canvas-sizer></canvas>

Here is the plunker I've been working on.

Answer 1

Working (I think) fork of your plunkr: http://plnkr.co/edit/sEZCyyC8dZOTo2LWcdc9?p=preview

Changed a few things around, moved most of the link stuff into the controller to support exposing it to the other directive. Changed your scaling function a tiny bit (it was doing *= for the new canvas size?)

This was missing too:

img.src=data;

Check it out, hope that helps!

Answer 2

As Sunil commented, the simple answer is that when you require a directive, you ask for its controller to be passed into your linking function as the fourth argument (not the third, as in your code).

Since you want to use the resize property on drawingCtrl, you should give your drawing directive a controller and move this functionality there. See "Creating directives that communicate" here: https://docs.angularjs.org/guide/directiveAs