Angular directive require on the same element

Question

Hi trying to require on the same element. According to angular docs this is possible.

A ^ prefix would make the directive look for the controller on its own element or its parents; without any prefix, the directive would look on its own element only.

Following the explanation. I have two directives, myD and myC... want to be able to access myD from myC's link ctrl attribute.

I've included a link to my codepen example.

var app = angular.module("app",[]);


app.directive("myD", function() {
   return {
      restrict : "E",
      template : "<b>myd</d>"
   }
});

app.directive("myC", function() {
   return {
      require : "myD",
      restrict : "A",
      link : function (scope, attr, ele, ctrl) {
         alert(JSON.stringify(ctrl));
      }
   }

});

<div ng-app="app">
   <my-d my-c></my-d>
</div>

http://codepen.io/mantisimo/pen/KWOxeg

Getting the following error:

Error: [$compile:ctreq] Controller 'myD', required by directive 'myC', can't be found!

put controller: function(){} inside directive myD?

ABOS
– ABOS

2017-04-10 15:11:03 +00:00
Commented Apr 10, 2017 at 15:11 — ABOS
– ABOS, Commented Apr 10, 2017 at 15:11
Thanks for that....literally just figured it! :-)

Mantisimo
– Mantisimo

2017-04-10 15:16:02 +00:00
Commented Apr 10, 2017 at 15:16 — Mantisimo
– Mantisimo, Commented Apr 10, 2017 at 15:16

Deblaton Jean-Philippe · Accepted Answer · 2017-04-10 15:15:45Z

2

When you use require, you ask angular to inject the controller of the required element. In your case, the controller was undefined.

The error was in myD where you need to declare a controller.

app.directive("myD", function() {
   return {
      restrict : "E",
      template : "<b>myd</d>",
      controller: function(){}
   }
});

answered Apr 10, 2017 at 15:15

Deblaton Jean-Philippe

11.4k4 gold badges53 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Mantisimo Over a year ago

Just figured it two seconds ago...It's funny how when you define the problem you see the problem... Thanks for the fast response.

Mantisimo Over a year ago

Hopefully will save someone else some pain :)

Deblaton Jean-Philippe Over a year ago

@Mantisimo next time, use a plastic duck ;-)

Deblaton Jean-Philippe Over a year ago

@Mantisimo if you use components instead of controllers, there is a default controller declared in each docs.angularjs.org/guide/…

Groben Over a year ago

And it's recomended to use components if you don't use the link nor the compile functions

Collectives™ on Stack Overflow

Angular directive require on the same element

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related