JQuery typescript angular 指令中的滑块无法正确显示 (c#)

Question

我正在尝试在我的应用程序中使用 JQuery 滑块，如果我尝试使用 JQuery 它工作正常，但是当我在使用 typescript 创建的 angular 指令中使用它时它显示如下：

这是指令：

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 模板：

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

其他指令正常工作。我还使用 VS 2015，来自 DefinitelyTyped

的 jqueryui.d.ts 和 angular.d.ts

感谢帮助！

Answer 1

好的，我发现了问题，它真的很愚蠢。我不得不改变这个：

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

进入这个：

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

它就像奇迹一样奏效。有人能告诉我为什么吗？

JQuery typescript angular 指令中的滑块无法正确显示 (c#)

JQuery slider in typescript angular directive do not display properly (c#)

c#

jquery

slider

angularjs

typescript