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, Apr 28 '15 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, Apr 28 '15 at 11:38

score 1 · Accepted Answer · answered Apr 28 '15 at 11:01

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--'
    };
 }]);

**@Yashika Garg**, thank you i can log my controller now. But i'm still confused about how using -- require -- in a directive. — adam, Apr 28 '15 at 11:48
I hope this may help you http://stackoverflow.com/questions/15672709/how-to-require-a-controller-in-an-angularjs-directive. — Yashika Garg, Apr 28 '15 at 15:29

Angular directives Controller not found by require

1 Answers1