在Angular 1.x中，包括组件中的指令？

Question

我有一个强制输入字段大写的指令，我希望在多个组件中重用它，但是当我尝试包含在我的组件中时出错。

  

https://docs.angularjs.org/error/ng/areq?p0=fn&p1=not%20a%20function,%20got%20string

my_page.html

....

   <script src="components.js"></script>
   <script src="my_compnenet.js"></script>
....

components.js

(function (angular)
{

   'use strict';
   angular.module('components', [])
   .directive('uppercased', function () {
      return {
         require: 'ngModel',
         link: function (scope, element, attrs, modelCtrl) {
            modelCtrl.$parsers.push(function (input) {
               return input ? input.toUpperCase() : "";
            });
            element.css("text-transform", "uppercase");
         }
      };
   });
})(window.angular);

my_componenet.js

angular.
  module('app').
  component('my_component', {
    templateUrl: 'my_page.html',
    controller: ['$scope', '$timeout', 'components'],
    bindings: {
      name: '='
    }
  });
})();

Answer 1

您需要将指令模块注入组件模块

angular.
  module('app',['components']).
  component('my_component', {
    templateUrl: 'my_page.html',
    controller: ['$scope', '$timeout'],
    bindings: {
      name: '='
    }
  });
})();