Wie umgehen AngularJS Richtlinie mit Typoskript

Question

Ich habe das folgende Skript mit dateTimePicker als AngularJS Richtlinie:

(function() { 
    'use strict'; 

    var module = angular.module('feedApp'); 

    module.directive('datetimepicker', [ 
     '$timeout', 
     function ($timeout) { 
      return { 
       require: '?ngModel', 
       restrict: 'EA', 
       scope: { 
        options: '@', 
        onChange: '&', 
        onClick: '&' 
       }, 
       link: function ($scope, $element, $attrs, controller) { 
        $($element).on('dp.change', function() { 
         $timeout(function() { 
          var dtp = $($element).data('DateTimePicker'); 
          controller.$setViewValue(dtp.date().format('MM/DD/YYYY HH:mm')); 
          $scope.onChange(); 
         }); 
        }); 

        $($element).on('click', function() { 
         $scope.onClick(); 
        }); 

        controller.$render = function() { 
         if (!!controller) { 
          if (controller.$viewValue === undefined) { 
           controller.$viewValue = null; 
          } 
          else if (!(controller.$viewValue instanceof moment)) { 
           controller.$viewValue = moment(controller.$viewValue); 
          } 
          $($element).data('DateTimePicker').date(controller.$viewValue); 
         } 
        }; 

        $($element).datetimepicker($scope.$eval($attrs.options)); 
       } 
      }; 
     } 
    ]); 
})(); 

Und ich möchte es neu zu schreiben Typoskript verwenden. Dies ist der Code, den ich jetzt habe:

namespace feedApp { 
    'use strict'; 

    DateTimePicker.$inject = ['$timeout']; 

    function DateTimePicker($timeout: ng.ITimeoutService): ng.IDirective { 
     var directive = <ng.IDirective>{ 
      require: '?ngModel', 
      restrict: 'EA', 
      scope: { 
       options: '@', 
       onChange: '&', 
       onClick: '&' 
      }, 
      link: link 
     }; 

     function link(scope: ng.IScope, element: JQuery, attrs: ng.IAttributes, controller: ng.INgModelController): void { 
      $(element).on('dp.change', function() { 
       $timeout(function() { 
        var dtp = $(element).data('DateTimePicker'); 
        controller.$setViewValue(dtp.date().format('MM/DD/YYYY HH:mm')); 
        scope.onChange(); 
       }); 
      }); 

      $(element).on('click', function() { 
       scope.onClick(); 
      }); 

      controller.$render = function() { 
       if (!!controller) { 
        if (controller.$viewValue === undefined) { 
         controller.$viewValue = null; 
        } 
        else if (!(controller.$viewValue instanceof moment)) { 
         controller.$viewValue = moment(controller.$viewValue); 
        } 
        $(element).data('DateTimePicker').date(controller.$viewValue); 
       } 
      }; 

      $(element).datetimepicker(scope.$eval(attrs.options)); 
     } 

     return directive; 
} 

angular.module("feedApp") 
    .directive("datetimepicker", DateTimePicker); 

}

Ich bin nicht mit Typoskript erlebt und ich weiß nicht wirklich, was die beste Praxis ist jQuery Elemente wie $(element).on mit TS zu ändern. Wie man mit

arbeitet

scope: { 
     options: '@', 
     onChange: '&', 
     onClick: '&' 
    }, 

innerhalb TypeScript link Funktion? Vielen Dank im Voraus für jede Hilfe.

Answer 1

Verwenden Sie bindToController, um auf Bereichsvariablen innerhalb des Anweisungscontrollers zuzugreifen. Zum besseren Strukturierung/Verständnis bitte verschiedene Komponenten einer Richtlinie in verschiedenen Dateien erklären wie Controller in einer einzigen Datei sein sollten, sollte html eine eigene Datei hat usw.

entnehmen Sie bitte Directive testing Frage und typescript github sample project für weitere Informationen in Bezug auf sich.

Wenn Sie mehr Klärung benötigt, bitte sagen Sie mir.

Grüße

Ajay