Error with noUiSlider 9.0.0

[itsmejustind]

The directive for noUiSlider results in an error. (At least with the latest version of noUiSlider 9.0.0) There are a few things going on here:

Line 1275: tooltips: angular.isDefined(scope.connect) ? scope.tooltips : undefined,

Should be: tooltips: angular.isDefined(scope.tooltips) ? angular.fromJson(scope.tooltips) : undefined,

Line 1276: connect: angular.isDefined(scope.connect) ? scope.connect : 'lower',

Should be: connect: angular.isDefined(scope.connect) ? angular.fromJson(scope.connect) : [false, false],

Passing 'lower' to connect results in an error: noUiSlider: 'connect' option doesn't match handle count

It's also missing other options, like behaviour: connect: angular.isDefined(scope.behaviour) ? scope.behaviour : undefined,

angular.module("ui.materialize.nouislider", [])
        .directive("nouislider", ["$timeout", function($timeout){
            return {
                restrict: 'A',
                scope: {
                    ngModel: '=',
                    min: '@',
                    max: '@',
                    step: '@?',
                    connect: '@?',
                    tooltips: '@?'
                },
                link: function (scope, element, attrs) {
                    $timeout(function () {
                        noUiSlider.create(element[0], {
                            start: scope.ngModel || 0,
                            step: parseFloat(scope.step || 1),
                            tooltips: angular.isDefined(scope.connect) ? scope.tooltips : undefined,
                            connect: angular.isDefined(scope.connect) ? scope.connect : 'lower',
                            range: {
                                'min': parseFloat(scope.min || 0),
                                'max': parseFloat(scope.max || 100),
                            },
                            format: {
                                to: function (number) {
                                    return Math.round(number * 100) / 100;
                                },
                                from: function (number) {
                                    return Number(number);
                                }
                            }
                        });

                        element[0].noUiSlider.on('update', function(values, input) {
                          scope.ngModel = parseInt(values[0], 10);
                          scope.$apply();
                        });
                    });
                }
            };
        }]);

angular.module("ui.materialize.nouislider", [])
        .directive("nouislider", ["$timeout", function($timeout){
            return {
                restrict: 'A',
                scope: {
                    ngModel: '=',
                    min: '@',
                    max: '@',
                    step: '@?',
                    connect: '@?',
                    tooltips: '@?',
                    behaviour: '@?'
                },
                link: function (scope, element, attrs) {
                    $timeout(function () {
                        noUiSlider.create(element[0], {
                            start: scope.ngModel || 0,
                            step: parseFloat(scope.step || 1),
                                tooltips: angular.isDefined(scope.tooltips) ? angular.fromJson(scope.tooltips) : undefined,
                            connect: angular.isDefined(scope.connect) ? angular.fromJson(scope.connect) : [false, false],
                behaviour: angular.isDefined(scope.behaviour) ? scope.behaviour : undefined,
                            range: {
                                'min': parseFloat(scope.min || 0),
                                'max': parseFloat(scope.max || 100),
                            },
                            format: {
                                to: function (number) {
                                    return Math.round(number * 100) / 100;
                                },
                                from: function (number) {
                                    return Number(number);
                                }
                            }
                        });

                        element[0].noUiSlider.on('update', function(values, input) {
                          scope.ngModel = parseInt(values[0], 10);
                          scope.$apply();
                        });
                    });
                }
            };
        }]);

[webbiesdk]

I've implemented the changes you have proposed, except for the fromJSON part.

It you are using fromJSON, it seems to me that you are somehow using AngularJS wrong, because it is possible to send complex objects as values using angular, not just text-strings.

So unless you can give me a very good reason to use fromJSON, I'll leave that part out.

[webbiesdk]

Keeping this issue open for now, to allow discussion.

[koushikmln]

the current implementation still has errors. its not initializing the nouislider element and listening to the update event which is throwing errors. replaced it with this version to make it work.