title: Inject Directive into Controller
body: <p>SOLVED: </p>
  
  <p>I was using the wrong approach. Now I have defined a $watch in the link function of the directive, that calls the open() method on the controller of the directive.</p>
  
  <p>Orginial Question:</p>
  
  <p>I'm currently working on an Angular App developed with Typescript. Now I have to following problem, I have an Directive that contains an KendoUI Window as an Popup Window. This window in the directive should be opened from the controller of the main form.</p>
  
  <p>Controller:</p>
  
  <pre><code>module CLogic.pps
  {
  'use strict';
  export class produktionsAuftragDetailController
  {
      ...
      static $inject = [
          '$scope',
          ...
          //'stListLoeschenWindow'
          ,'stListLoeschenFactory'
          ];      
      constructor(
          private $scope: any,
          ...
          //, private stListLoeschenWindow: CLogic.pps.directives.stListLoeschenDirective
          , private stListLoeschenFactory: CLogic.pps.directives.stListLoeschenDirective
          )
      {
  
     // Switch Form to Edit Mode
      aendern(stlD: CLogic.pps.directives.stListLoeschenController)
      {
      // Call the open method of the controller of the directive here
          stListLoeschenFactory.controller.open(1234);
      }
      ...
      }
  }    
  angular
      .module('CLogic.pps')
      .controller('CLogic.pps.produktionsAuftragDetailController',produktionsAuftragDetailController);
  }
  </code></pre>
  
  <p>Directive:</p>
  
  <pre><code>module CLogic.pps.directives
  {
  'use strict';
  export class stListLoeschenController
  {
      public StListLoeschenWindow: kendo.ui.Window;
  
      private StListKey: number;public Fixieren: boolean;public Prodinfo: boolean;
  
      static $inject =
      [
          'CLogic.pps.services.ppsDataService','$log','hotkeys'
      ];
      constructor
          (public dataService: CLogic.pps.ppsDataService, private $log: ng.ILogService, public hotkeys: ng.hotkeys.HotkeysProvider
          )
      {
          this.Fixieren = false;
          this.Prodinfo = false;
      }
      // This is the method that should be called from the main Controller       
      open(index: number)
      {
          this.StListKey = index;
          this.StListLoeschenWindow.open();
          this.StListLoeschenWindow.center();
      }
  }
  
  export class stListLoeschenDirective implements ng.IDirective
  {
      restrict = 'AE';
      templateUrl = 'CLogic/pps/detail/StListDeleteBestWindow.directive.html';
      controller = CLogic.pps.directives.stListLoeschenController;
      controllerAs = 'stListLoeschen';
  
      constructor(private ppsDataService: CLogic.pps.ppsDataService, $log: ng.ILogService, hotkeys: ng.hotkeys.Hotkey){}
  
      link: ng.IDirectiveLinkFn = (scope: ng.IScope, element: ng.IAugmentedJQuery, attributes: ng.IAttributes)=&gt;{ };
  
      static factory(): ng.IDirectiveFactory 
      {  
          var directive: ng.IDirectiveFactory = (ppsDataService, $log, hotkeys) =&gt; new stListLoeschenDirective(ppsDataService, $log, hotkeys);
          directive.$inject = ['CLogic.pps.services.ppsDataService', '$log', 'hotkeys'];
          return directive;
      }
  }
  angular
      .module('CLogic.pps.directives', [])
      .directive('stListLoeschenWindow', stListLoeschenDirective.factory())
      .factory('stListLoeschenFactory', stListLoeschenDirective.factory());
  }
  </code></pre>
  
  <p>When I inject the factory the code works instead of the fact that I can get no reference to the controller of the directive (in the aendern method of the main controller). And when I try to inject the directive itself into the main controller I get an injector error:</p>
  
  <blockquote>
    <p>Error: [$injector:unpr] Unknown provider:
    stListLoeschenDirectiveProvider &lt;- stListLoeschenDirective &lt;-
    CLogic.pps.produktionsAuftragDetailController
    <a href="http://errors.angularjs.org/1.4.1/" rel="nofollow">http://errors.angularjs.org/1.4.1/</a>$injector/unpr?p0=stListLoeschenDirectiveProvider%20%3C-tListLoeschenDirective%20%3C-%20CLogic.pps.produktionsAuftragDetailController
        at <a href="https://localhost:44302/Scripts/angular.js:68:12" rel="nofollow">https://localhost:44302/Scripts/angular.js:68:12</a></p>
  </blockquote>