1

I am trying to build an application that uses angularjs and jquery mobile:

I have stumbled upon a problem when trying to filter model for jquery mobile slider. The problem is that I need to modify data in directive (that is displayed for user) and that is used for further processing.

I found a posible way of achieving my goal on this post: Using angularjs filter in input element

However this doesn't work, probobly beause I am using compile function instead of link (because I need to trigger jquery slider create event before binding any data. If I don't do so, the neccessery markup for jquery mobile slider is not generated).

So anyway what happens is that after passing model trought another "filter" directive, the value is set to "1" even though it should be "50". And on top of that slider starts to act strangely, it only allows part of values to be set, for example "10" thought it should be "100".

Here's how I define my directives:

mcb.directive('jparser', function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (s, e, a, ngModel) {
            ngModel.$parsers.push(function (input) {
                console.log('parser: ' + input);
                return Math.round(input * 10);
            });
            ngModel.$formatters.push(function (input) {
                console.log('formater: ' + input);
                return Math.round(input / 10);
            });
        }
    };
});

mcb.directive('jSlider', function () {
    return {
        scope: {
            id: '@',
            label: '@',
            value: '=',
            min: '=',
            max: '=',
            step: '@',
            start: '&',
            stop: '&'
        },
        restrict: 'A',
        replace: false,
        templateUrl: 'jslider.html',
        compile: function (e) {
            e.trigger('create');
            return {
                post: function (s, e, a) {
                    e.on('slidestart onfocus', function () {
                        return s.start();
                    });

                    e.on('slidestop', function () {
                        return s.stop();
                    });

                    e.on('focus', '.ng-valid-number', function () {
                        return s.start();
                    });

                    e.on('blur', '.ng-valid-number', function () {
                        return s.stop();
                    });

                    s.$watch('value', function (nv) {
                        console.log('nv:'+nv);
                        return e.find('#' + a.id).slider('refresh');
                    });

                    s.$watch('min', function () {
                        return e.find('#' + a.id).slider('refresh');
                    });

                    s.$watch('max', function () {
                        return e.find('#' + a.id).slider('refresh');
                    });
                }
            };
        }
    };
});

Sorry if it's messy question, I was trying to describe the problem as clear as possible.

Here's a plunker, with the problem in action: http://plnkr.co/edit/k8u0UgbIX8qLCGX1Yw3A?p=preview

Community
  • 1
  • 1
antanas_sepikas
  • 5,644
  • 4
  • 36
  • 67

0 Answers0