AngularJS指令向指令通信抛出有关未找到控制器的错误

I have 2 directives, one for searching and one for pagination. The pagination directive needs to access the search directive to find out what property we're currently searching by. When I load the page though, it throws an error saying Error: [$compile:ctreq] Controller 'search', required by directive 'pagination', can't be found!. However I have a controller setup in my search directive.

我有2个指令,一个用于搜索,一个用于分页。分页指令需要访问搜索指令以找出我们当前正在搜索的属性。当我加载页面时,它会抛出错误说错误:[$ compile:ctreq]无法找到指令'pagination'所需的控制器'搜索'!但是我的搜索指令中有一个控制器设置。

Here is my search directive:

这是我的搜索指令:

angular.module('webappApp')
  .directive('search', function ($route) {
    return {
      templateUrl: 'views/search.html',
      restrict: 'E',
      scope: {
        searchOptions: '=',
        action: '=',
        currentProperty: '=',
        currentValue: '='
      },
      controller: function($scope) {
        $scope.searchBy = $scope.searchOptions[0].text;
        $scope.searchByProperty = $scope.searchOptions[0].property;

        $scope.setSearchBy = function(event, property, text) {
          event.preventDefault();
          $scope.searchBy = text;
          $scope.searchByProperty = property;
        };

        $scope.search = function() {
          $scope.searching = true;
          $scope.currentProperty = $scope.searchByProperty;
          $scope.currentValue = angular.element('#searchCriteria').val();
          $scope.action($scope.searchByProperty, $scope.currentValue, function() {
            $scope.searching = false;
          });
        };

        $scope.reload = function() {
          $route.reload();
        };
      }
    };
  });

Here is my pagination directive:

这是我的分页指令:

angular.module('webappApp')
  .directive('pagination', function () {
    return {
      templateUrl: 'views/pagination.html',
      restrict: 'E',
      require: '^search',
      scope: {
        basePath: '@',
        page: '=',
        sort: '='
      },
      link: function(scope, element, attrs, searchCtrl) {
        console.debug(searchCtrl);
        scope.searchByProperty = searchCtrl.searchByProperty;
      }
    };
  });

2 个解决方案

#1

In order for one directive to use another's controller by use of require, it needs to either share the same element as the controller containing directive, or it has to be a child of it.

为了使一个指令通过使用require使用另一个指令,它需要与包含指令的控制器共享相同的元素,或者它必须是它的子节点。

You can't use require in the way you have, where the elements are siblings.

您不能以您拥有的方式使用require,其中元素是兄弟姐妹。

Angular docs about directives, including require

有关指令的Angular文档,包括require

If it doesn't make sense to rearrange the DOM in the way I've described, you should inject a service into both directives which contains the data/methods you wish to share between the two.

如果以我描述的方式重新排列DOM没有意义,那么您应该将服务注入到两个指令中,这两个指令包含您希望在两者之间共享的数据/方法。

Note: you could also experiment with the $$nextSibling / $$prevSibling properties of the directives' scopes, but this would present only a very fragile solution

注意:您还可以尝试使用指令范围的$$ nextSibling / $$ prevSibling属性,但这只会提供一个非常脆弱的解决方案

#2

You cannot use require in directive like that, however , since the only thing you need to pass between directives is a string , just bind them to the same property in parent controller (it can be parent directive controller):

但是,你不能在这样的指令中使用require,因为你需要在指令之间传递一个字符串,只需将它们绑定到父控制器中的相同属性(它可以是父指令控制器):

...
<div ng-app='app' ng-controller='MyCtrl as ctrl'> 
   <my-dir-one s1='ctrl.message'></my-dir-one>
   <my-dir-two s2='ctrl.message'></my-dir-two>

and first directives:

和第一个指令:

app.directive('myDirOne', function ($route) {
  return {
    templateUrl: 'views/my-dir-one.html',
    restrict: 'E',
    scope: {
      s1: '=',

second directive

app.directive('myDirTwo', function ($route) {
  return {
    templateUrl: 'views/my-dir-one.html',
    restrict: 'E',
    scope: {
      s2: '=',

#1