Error: [$compile:ctreq] data passing between two directive from different module

Question

I have two different module in which I have two directives. I need to pass data between these two directive. I use require property. but I get some error

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

My first directive is

 angular.module('movieApp.yearsort.directives', []).directive('yearSort',[function(){
    return{
    restrict : 'AEC',
        replace : true,
        transclude :  true,
        controller : 'YearsortController',
        templateUrl : 'app/components/yearsort/yearsort.html',
    };
}]);

In the YearsortController I have the code

angular.module('movieApp.yearsort.controller', []).controller('YearsortController', ['$scope','HomeFactory','$timeout','$state',function($scope,HomeFactory,$timeout,$state) {
this.sayHello = function() {
        $scope.words = "my requier";
        console.log( $scope.words);
      };

 }]);

In my second directive I have the code

angular.module('movieApp.budgetsort.directives', []).directive('budgetSort',[function(){
    return{
    restrict : 'AEC',
        replace : true,
        transclude :  true,
        controller : 'BudgetsortController',
        templateUrl : 'app/components/budgetSort/budgetSort.html',
        require : "yearSort",
        link : function(scope,element, attrs, demoCtrl){
            demoCtrl.sayHello();
        }
    };
}]);

For information on the error, see [AngularJS Error Reference - Error: $compile:ctreq Missing Required Controller](https://docs.angularjs.org/error/$compile/ctreq). If the required controller is expected to be on an ancestor element, make sure that you prefix the controller name in the require definition with `^`. — georgeawg, Aug 12 '17 at 18:33
Also `replace:true` is deprecated. For more information, see [Explain why `replace: true` is deprecated](https://stackoverflow.com/a/35519198/5535245). — georgeawg, Aug 12 '17 at 18:41

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

Why don't you try using a Service/Factory? It is a good option when you need to pass data through components or directives

I've made this plunkr to explain: http://plnkr.co/edit/V7BLbOrrtNhXl1QlUKxA?p=preview

HTML:

  <body ng-controller="myCtrl">
    <first-directive></first-directive>
    <second-directive></second-directive>
  </body>

Javascript:

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

app.controller('myCtrl', function($scope, dataService) {
  $scope.name = 'World';
  //set up the items.
  angular.copy([ { name: 'test'} , { name: 'foo' } ], dataService.items);
});

app.directive('firstDirective', function(dataService){
  return {
    restrict: 'E',
    template: '<h3>Directive 1</h3>' + 
    '<div ng-repeat="item in data.items">' + 
      '<input type="text" ng-model="item.name"/>' + 
    '</div>',
    link: function(scope, elem, attr) {
      scope.data = dataService;
    }
  };
});

app.directive('secondDirective', function(dataService){
  return {
    restrict: 'E',
    template: '<h3>Directive 2</h3>' + 
    '<div ng-repeat="item in data.items">' + 
      '<input type="text" ng-model="item.name"/>' + 
    '</div>',
    link: function(scope, elem, attr) {
      scope.data = dataService;
    }
  };
});

app.factory('dataService', [function(){
  return { items: [] };
}]);

The Demo

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

app.controller('myCtrl', function($scope, dataService) {
  $scope.name = 'World';
  //set up the items.
  angular.copy([ { name: 'test'} , { name: 'foo' } ], dataService.items);
});

app.directive('firstDirective', function(dataService){
  return {
    restrict: 'E',
    template: '<h3>Directive 1</h3>' + 
    '<div ng-repeat="item in data.items">' + 
      '<input type="text" ng-model="item.name"/>' + 
    '</div>',
    link: function(scope, elem, attr) {
      scope.data = dataService;
    }
  };
});

app.directive('secondDirective', function(dataService){
  return {
    restrict: 'E',
    template: '<h3>Directive 2</h3>' + 
    '<div ng-repeat="item in data.items">' + 
      '<input type="text" ng-model="item.name"/>' + 
    '</div>',
    link: function(scope, elem, attr) {
      scope.data = dataService;
    }
  };
});

app.factory('dataService', [function(){
  return { items: [] };
}]);

<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
    <first-directive></first-directive>
    <second-directive></second-directive>
  </body>

Error: [$compile:ctreq] data passing between two directive from different module

1 Answers1

The Demo