Question

我有2个指令，一个用于搜索，一个用于分页。分页指令需要访问搜索指令以找出我们当前正在搜索的属性。当我加载页面时，会抛出错误Error: [$compile:ctreq] Controller 'search', required by directive 'pagination', can't be found!。但是我的搜索指令中有一个控制器设置。

这是我的搜索指令：

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

这是我的分页指令：

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

Answer 1

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

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

Angular docs about directives, including require

如果以我所描述的方式重新排列DOM没有意义，你应该在两个指令中注入一个服务，其中包含你希望在两者之间共享的数据/方法。

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

Answer 2

你不能在这样的指令中使用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>

和第一个指令：

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

第二指令

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

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

2 个答案: