Angular directives Controller not found by require

Question

here's the problem, i'm trying to split my html by using a directive for render a sub header.

In the sub header, i'm doing some logic to render some buttons. All the logic used for that is coded in the controller of this view.

So i wrote a directive to create an element for my sub header:

 angular.module('myApp')
  .directive('subHeader', ['ServiceOne','ServiceTwo',
  function(ServiceOne, ServiceTwo){
    return{
      restrict: 'E',
      require: '^MyCtrl',
      link: function(scope, element, attrs, ctrl){
          console.log(ctrl);

         // Logic for buttons in sub header

      },
      templateUrl: '--here my path to the .html template--'
    };
  }]);

The html template is rendered fine in the view fine, so i try to move the functions for the logic present in my sub header in the link method. But i'm not able to log the existing controller.

I just want to add that i am requiring the controller because the logic in sub header depends on the data retrived by that controller.

What am i missing or what am i doing wrong?

What is MyCtrl. It should be a controller on the parent directive in the html tree. — Chandermani
– Chandermani, Commented Apr 28, 2015 at 10:38
controller of this view - do you mean that somewhere on the page you have ng-controller="MyCtrl" or does the directive have its own controller? — a better oliver
– a better oliver, Commented Apr 28, 2015 at 11:38

Yashika Garg · Accepted Answer · 2015-04-28 11:01:10Z

1

In directives we use "controller" and "controllerAs" not "require". "controller" - the actual name of your controller in string or controller function itself. "controllerAs" - the alias name of your controller which you can use in your html view

 angular.module('myApp')
  .directive('subHeader', ['ServiceOne','ServiceTwo',
   function(ServiceOne, ServiceTwo){
    return{
      restrict: 'E',
      controller: 'MyCtrl',
      link: function(scope, element, attrs, ctrl){
        console.log(ctrl);

        // Logic for buttons in sub header

       },
       templateUrl: '--here my path to the .html template--'
    };
 }]);

 angular.module('myApp').controller("MyCtrl", function($scope){
    //Do your stuff
 });

OR

angular.module('myApp')
  .directive('subHeader', ['ServiceOne','ServiceTwo',
   function(ServiceOne, ServiceTwo){
    return{
      restrict: 'E',
      controller: function($scope)(){
       // Do your stuff
      },
      controllerAs: 'MyCtrl',
      link: function(scope, element, attrs, ctrl){
        console.log(ctrl);

        // Logic for buttons in sub header

       },
       templateUrl: '--here my path to the .html template--'
    };
 }]);

answered Apr 28, 2015 at 11:01

Yashika Garg

2,3662 gold badges16 silver badges17 bronze badges

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

2 Comments

adam Over a year ago

@Yashika Garg, thank you i can log my controller now. But i'm still confused about how using -- require -- in a directive.

Yashika Garg Over a year ago

I hope this may help you stackoverflow.com/questions/15672709/….

Collectives™ on Stack Overflow

Angular directives Controller not found by require

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related