1

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

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

1 回答 1

1

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

我做了这个 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: [] };
}]);

演示

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>

于 2017-08-12T15:27:42.253 回答