在Angular 1.x中，是否在组件中包含指令？

Question

I have a directive for forcing uppercase in input fields which I would like to reuse in multiple components, but I have an error when I try to include in my component.

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

you need to inject the directive module to the component module

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