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

Question

我有两个不同的模块，其中有两个指令。我需要在这两个指令之间传递数据。我使用 require 属性。但是我得到一些错误

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

我的第一个指令是

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

在 YearsortController 中我有代码

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

 }]);

在我的第二个指令中，我有代码

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

Answer 1

为什么不尝试使用 Service/Factory？当您需要通过组件或指令传递数据时，这是一个不错的选择

我做了这个 plunkr 来解释：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

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

require

angularjs

angularjs-directive

angular-require

The Demo