0

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.

Community
  • 1
  • 1
John
  • 7,114
  • 2
  • 37
  • 57
  • 1
    Your `drawing` directive does not have a controller, hence the error. Check out the `controller` property, with that you can specify a controller to use for the directive ... You'll likely move some of the code in your directive's link function into the controller. – Sunil D. May 03 '14 at 23:35
  • When you use "require" in a directive you are asking for the controller of the required directive. Directives expose their "API" via controller. Look at the source of ngModel/ngModelCtrl and how another directive includes and uses that. – aet May 04 '14 at 00:58

2 Answers2

2

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!

aet
  • 7,192
  • 3
  • 27
  • 25
  • Hey thanks for your time for answering the problem. I watched this (egghead.io video)(https://egghead.io/lessons/angularjs-directive-to-directive-communication) before, but I skimmed over it this time. Didn't think to put a controller in my directive. I should be looking a lot more closely to tutorials and documentation. Sorry about that, but thanks again for you help. – John May 04 '14 at 05:53
1

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

Rob
  • 361
  • 2
  • 5