在modlule中不能要求指令

Question

此代码在页面打开时生成错误

未知提供商：$ cardProvider＆lt; - $ card＆lt; - cardNumberDirective

哪里出错？我发现一切都应该有效，但事实并非如此。

angular.module('card', [])
.controller('CardCtrl', ['$scope', function ($scope) {}])

.directive('card', ['$compile', function ($compile) {
  return {
    restrict: 'A',
    scope: {
      cardContainer: '@',
      width: '@',
      placeholders: '=',
      options: '=',
      messages: '=',
    },
    controller: 'CardCtrl',
    link: function (scope, element, attributes, cardCtrl) {
      // Some logic is here...

      new Card(opts);
    }
  };
}])

.directive('cardNumber', ['$compile', function ($compile) {
  return {
    restrict: 'A',
    scope: {
      ngModel: '='
    },
    require: [
      '^card', // this directive can't be find
      'ngModel'
    ],
    link: function (scope, element, attributes, ctrls) {

    }
  };
}])

感谢您提出任何建议。