"Undefined is not an object" on page transitions

[centipod]

Good morning,

First of all: Loving your slider!

I keep running into this one issue in my Angular app when moving to or from a page that holds a slider:

Error: undefined is not an object (evaluating 'e.settings.value.split')

create@file:///Users/christian.schuit/Documents/Development/GitLab/sdc/sdc/sdc-app/src/main/html/ext/ng-slider/angular-awesome-slider.min.js:49:383
init@file:///Users/christian.schuit/Documents/Development/GitLab/sdc/sdc/sdc-app/src/main/html/ext/ng-slider/angular-awesome-slider.min.js:45:1144
e@file:///Users/christian.schuit/Documents/Development/GitLab/sdc/sdc/sdc-app/src/main/html/ext/ng-slider/angular-awesome-slider.min.js:45:630
p@file:///Users/christian.schuit/Documents/Development/GitLab/sdc/sdc/sdc-app/src/main/html/ext/ng-slider/angular-awesome-slider.min.js:31:353
m@file:///Users/christian.schuit/Documents/Development/GitLab/sdc/sdc/sdc-app/src/main/html/ext/ng-slider/angular-awesome-slider.min.js:18:49
file:///Users/christian.schuit/Documents/Development/GitLab/sdc/sdc/sdc-app/src/main/html/ext/ng-slider/angular-awesome-slider.min.js:29:46
file:///Users/christian.schuit/Documents/Development/GitLab/sdc/sdc/sdc-app/src/main/html/ext/angularjs/angular.min.js:158:251
e@file:///Users/christian.schuit/Documents/Development/GitLab/sdc/sdc/sdc-app/src/main/html/ext/angularjs/angular.min.js:45:355
file:///Users/christian.schuit/Documents/Development/GitLab/sdc/sdc/sdc-app/src/main/html/ext/angularjs/angular.min.js:48:276

I'm making some effort in debugging it and trying to figure out a workaround, but was wondering if you have seen this before? Perhaps I am just doing something wrong?

Thanks!

[centipod]

PS. In your latest code base, the error hits on line 622:

Error: undefined is not an object (evaluating 'self.settings.value.split')

create@file:///Users/christian.schuit/Documents/Development/GitLab/sdc/sdc/sdc-app/src/main/html/ext/ng-slider/angular-awesome-slider.min.js:622:39
init@file:///Users/christian.schuit/Documents/Development/GitLab/sdc/sdc/sdc-app/src/main/html/ext/ng-slider/angular-awesome-slider.min.js:583:18
Slider@file:///Users/christian.schuit/Documents/Development/GitLab/sdc/sdc/sdc-app/src/main/html/ext/ng-slider/angular-awesome-slider.min.js:559:29
slidering@file:///Users/christian.schuit/Documents/Development/GitLab/sdc/sdc/sdc-app/src/main/html/ext/ng-slider/angular-awesome-slider.min.js:188:30
init@file:///Users/christian.schuit/Documents/Development/GitLab/sdc/sdc/sdc-app/src/main/html/ext/ng-slider/angular-awesome-slider.min.js:78:53
file:///Users/christian.schuit/Documents/Development/GitLab/sdc/sdc/sdc-app/src/main/html/ext/ng-slider/angular-awesome-slider.min.js:160:19
file:///Users/christian.schuit/Documents/Development/GitLab/sdc/sdc/sdc-app/src/main/html/ext/angularjs/angular.min.js:158:251
e@file:///Users/christian.schuit/Documents/Development/GitLab/sdc/sdc/sdc-app/src/main/html/ext/angularjs/angular.min.js:45:355
file:///Users/christian.schuit/Documents/Development/GitLab/sdc/sdc/sdc-app/src/main/html/ext/angularjs/angular.min.js:48:276

[centipod]

Further testing shows the same on line 647.

By added a test to both lines to see whether the object exists, the error goes away but I havent yet discovered whether this impacts the functionality of the slider. Further testing commences.

622: values = (self && self.settings && self.settings.value) ? self.settings.value.split(';') : [];
647: this.settings.single = (self && self.settings && self.settings.value) ? !self.settings.value.split(";")[1] : '';

[centipod]

To complete my test case, this is my directive code, where formatLabel is passed as a method (I replaced the other variables with literals for this test):

<input data-ng-model="amount" type="text" 
    name="amount" id="amount" slider options="{
    from: 500,
    to: 8000,
    step: 500,
    dimension: '',
    scale: [ 
        formatLabel('R','')(500),
        formatLabel('R','')(2000),
        formatLabel('R','')(4000),
        formatLabel('R','')(6000),
        formatLabel('R','')(8000)
    ],
    heterogeneity: ['25/' + 2000,'50/' + 4000,'75/' + 6000],
    vertical: false,
    round: true,
    smooth: true,
    realtime: true,
    modelLabels: formatLabel('R',''),
    threshold: 2,
    css: {
        background: {'background-color': 'silver'},
            before: {'background-color': '#92AAC7'},
            default: {'background-color': 'white'},
            after: {'background-color': 'green'},
            pointer: {'background-color': 'red'},
            range: {'background-color': 'red'} 
        }
    }" />

My formatting function:

$scope.formatLabel = function(prefix,postfix) {
	
	return function(value) {
	
		return '<nobr>' + prefix + $filter('number')(value, 0) + postfix + '</nobr>';
	}
}

Hope you can help me out...

Thanks!

[darul75]

Woo, first of all thanks a lot for sharing and all details given above. I am not sure I can take a look at the moment because I have not managed it for a while, but as soon as I got time, I will give a try.