Javascript Angular JS-指令间共享控制器

似乎不明白为什么这不起作用

我想做的是：

我需要能够从mainContent指令与focus指令共享控制器，并且我一直遇到以下错误：无法设置未定义的属性'element'

我实际上是在复制/粘贴这个示例：：所以我不确定为什么它不起作用

相关代码：

是的，我知道这种语法并不常见，但是它遵循我的项目的样式指南

---

提前谢谢，非常感谢您的帮助

@PSL刚刚编辑过。打字错误应该是我的天哪。。。我现在在踢自己。我已经知道了命名惯例，但不知怎么的，我仍然错过了它哈哈。错误现在消失了。把它作为答案贴出来，我会接受的。你的答案可能会因为打字错误而被关闭。。所以也许你可以删除它，或者自己发布一个答案，在时间允许的时候接受它。。干杯还有一件事，因为您有require:“^？mainContent”，作为可选要求，最好进行空检查。

//html
<mainContent id="mainContent">
  <focus>whatever</focus>
</mainContent>

//js
angular.module('home', [])
  .directive('mainContent', mainContent)
  .directive('focus', focus);

mainContent.$inject = [];
function mainContent() {
  return {
    restrict: 'E',
    scope: {},
    controller: function($scope) {
      $scope.element = '';
    }
  }
}

focus.$inject = [];
function focus() {
  return {
    restrict: 'E',
    transclude: true,
    template: '<div id="focus"><div ng-transclude></div></div>',
    require: '^?mainContent', // also tried 'mainContent' && '^mainContent'
    link: function(scope, elem, attrs, ctrl) {
      ctrl.element = 'such wow';
    }
  };
}