CODEWITHSUNDEEP
c#jqueryangularjstypescriptslider
Bohuslav Sys
Bohuslav Sys

Reputation: 87

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

I am trying to use JQuery slider in my application and if I try it just with JQuery it works fine, but when I use it in angular directive created with typescript it displays like this:

enter image description here

Here is the directive: 

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 template:

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

Other directives are working like they should. Also I am using VS 2015, jqueryui.d.ts and angular.d.ts from DefinitelyTyped

Thanks for help!

Upvotes: 0

Views: 514

Answers (1)

Bohuslav Sys
Bohuslav Sys

Reputation: 87

Ok I found the problem and it is really stupid. I had to change this:

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

into this:

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

And it worked like a miracle. Can just somebody tell me why?

Upvotes: 1

Related Questions