Angular JS - 指令之间的共享控制器

Question

似乎无法弄清楚为什么这不起作用......

我正在尝试做什么：

我需要能够通过mainContent指令与焦点指令共享控制器，并且我不断收到此错误：Cannot set property 'element' of undefined。

我几乎从这个例子中复制/粘贴：https://www.codeschool.com/screencasts/egghead-io-flexible-angular-directives：所以我不确定它为什么不起作用？

相关代码：

//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';
    }
  };
}

（是的，我知道这种语法并不常见，但它遵循我项目的样式指南） 在此先感谢，非常感谢任何帮助！