Javascript 嵌套指令之间的通信不起作用

我在指令栏中有一个指令Foo，我试图在Foo中调用一个函数

但它不起作用

创建了小提琴示例

angular.module('ui', []).directive('uiFoo',
function() {
    return {
        restrict: 'E',
        template: '<p>Foo</p>',
        link: function($scope, element, attrs) {
            $scope.message = function() {
                alert(1);
            };
        },
        controller: function($scope) {
            this.message = function() {
                alert("Foo Function!");
            }
        }
    };
}
).directive('uiBar',
function() {
    return {
        restrict: 'E',
        template: '<button ng-click="callFunction()">Bar</button> <ui-foo></ui-foo>',
        require: 'uiFoo',
        scope: true,
        link: function($scope, element, attrs, uiFooController) {
            $scope.callFunction = function() {
                alert('Bar Function');
                uiFooController.message();
            }

        }
    };
}
);angular.module('myApp', ['ui']);

angular.module（'ui'，[]）.directive（'uiFoo'，
函数（）{
返回{
限制：'E'，
模板：“Foo
”，
链接：函数（$scope，element，attrs）{
$scope.message=函数（）{
警报（1）；
};
},
控制器：功能（$scope）{
this.message=函数（）{
警报（“Foo函数！”）；
}
}
};
}
).指令（“uiBar”，
函数（）{
返回{
限制：'E'，
模板：'Bar'，
要求：'uiFoo'，
范围：正确，
链接：函数（$scope、element、attrs、uiFooController）{
$scope.callFunction=function（）{
警报（“条形功能”）；
uiFooController.message（）；
}
}
};
}
);模块（'myApp'，['ui']）；

用户界面看起来像这样

 <div ng-app="myApp">  <ui-bar>  </ui-bar></div>

---

您遗漏了此错误消息：

找不到指令“uiBar”所需的控制器“uiFoo”

问题是require层次结构在树上搜索，而不是在树下搜索。因此，

ui-bar

试图在其自身上或（使用

^

符号）在其祖先之一（而不是其子代之一）中找到

uiFoo

指令控制器

如果要从child指令调用方法，只需使用作用域：

angular.module（'ui'，[]）.directive（'uiFoo'，
函数（）{
返回{
限制：'E'，
模板：“Foo
”，
控制器：功能（$scope）{
$scope.message=函数（）{
警报（“Foo函数！”）；
}
}
};
}
).指令（“uiBar”，
函数（）{
返回{
限制：'E'，
模板：'Bar'，
范围：正确，
控制器：功能（$scope）{
$scope.callFunction=function（）{
警报（“条形功能”）；
$scope.message（）；
}
}
};
}
);

angular.module('ui', []).directive('uiFoo',
  function() {
    return {
      restrict: 'E',
      template: '<p>Foo</p>',
      controller: function($scope) {
        $scope.message = function() {
          alert("Foo Function!");
        }
      }
    };
  }
).directive('uiBar',
  function() {
    return {
      restrict: 'E',
      template: '<button ng-click="callFunction()">Bar</button> <ui-foo></ui-foo>',
      scope: true,
      controller: function($scope) {
        $scope.callFunction = function() {
          alert('Bar Function');
          $scope.message();
        }

      }
    };
  }
);