JQuery Slider in Typoskript eckige Direktive nicht korrekt angezeigt (C#)

Question

Ich versuche, JQuery Slider in meiner Anwendung zu verwenden, und wenn ich es nur mit JQuery versuchen, funktioniert es gut, aber wenn ich es in eckigen Anweisung mit Typoskript es erstellt wie folgt angezeigt:

Hier ist die Richtlinie:

SliderDirective.$inject = ["$window"]; 

function SliderDirective($window: ng.IWindowService): IMediaDirective { 
    return { 
     restrict: "EA", 
     link: link 
    } 

    function link(scope: IMediaDirectiveScope, element: ng.IAugmentedJQuery, attrs: IMediaDirectiveAttributes) { 
     element.slider({ 
      range: true, 
      min: 10, 
      max: 100, 
      value: 50, 
      slide: (event: Event, ui: JQueryUI.SliderUIParams) => { 
       scope.$apply(function() { 
        scope[attrs.ngModel] = ui.value; 
       }); 
      } 
     }) 
    } 
} 

angular.module("mediaApp").directive("slider", SliderDirective); 

HTML-Vorlage:

<input ng-model="slider" type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;"> 
    <slider ng-model="slider"></slider> 

Andere Direktiven funktionieren wie sie sollten. Auch verwende ich VS 2015, jqueryui.d.ts und angular.d.ts von DefinitelyTyped

Danke für Hilfe!

Answer 1

Ok Ich habe das Problem gefunden und es ist wirklich dumm. Ich hatte dies zu ändern:

<input ng-model="slider" type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;"> 
<slider ng-model="slider"></slider> 

in diese:

<input ng-model="slider" type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;"> 
<div slider ng-model="slider"></div> 

Und es hat funktioniert wie ein Wunder. Kann mir nur jemand sagen warum?