Two way data-binding in slider in AngularJS

Question

I have a use case where I need the slider-directive to update configuration & model value dynamically through a controller. For this I am trying to a create a two way data binding. However, I am not able to find the right way to create two way data-binding in directive. Following is the code. Currently an slide event on slider triggers directive to update 'scope.model'. Though it doesn't respond to controller updates for 'scope.config' or 'scope.model':

.directive("slider", function() {
return {
    restrict: 'A',
    scope: {
        config: "=config",
        model: "=model",
        trigger: '=trigger'
    },
    link: function(scope, elem, attrs) {

     //Data Binding to be done here using $watch for scope.model

        $(elem).slider({
            range: "min",
            min: scope.config.min,
            max: scope.config.max,
            value: scope.model,
            step: scope.config.step,
            slide: function(event, ui) {
                scope.$apply(function() {
                    scope.model = ui.value;
                });
                console.log(scope.model);
                scope.$apply(scope.trigger);
            }
            });
        }
    }
});

Please help me in this. I have gone through all the available answers but wasn't able to find the suitable answer

@Jai: Here's working plunker: embed.plnkr.co/8kun1BfePtsNCK90HLdb/preview — rahulthakur319
– rahulthakur319, Commented Sep 30, 2015 at 11:31

Ori Drori · Accepted Answer · 2015-09-30 12:52:38Z

1

Base your directive on ngModelController. In this way you can use the ngModel functionality to bind everything, and use ngChange to run callback, without the need for $watch (plunkr):

app.directive("slider", function() {
  return {
    restrict: 'A',
    scope: {
      config: "=config"
    },
    require: 'ngModel',
    link: function(scope, elem, attrs, ngModel) {
      var init = false;
      var $slider = $(elem);

      ngModel.$render = function() {
        if (!init) {
          $slider.slider({
            range: "min",
            min: scope.config.min,
            max: scope.config.max,
            step: scope.config.step,
            slide: function(event, ui) {
              scope.$apply(function() {
                ngModel.$setViewValue(ui.value);
              });
            }
          });

          init = true;
        }

        $slider.slider('value', parseInt(ngModel.$viewValue, 10));
      }

    }
  }
});

Usage:

  <div id="km-slider" class="slider" slider="" config="milesSliderConfig" 
  ng-change="filterCars(sliderRanges.kms)"
  ng-model="sliderRanges.kms"></div>

answered Sep 30, 2015 at 12:52

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

rahulthakur319 Over a year ago

Thanks Ori. This is exactly the solution I was looking for. BTW can you give me a broad idea how can we extend it to Range Slider. I will take it up from there

Ori Drori Over a year ago

Use the Jquery UI slider range option. The model should be an array [ 75, 300 ], and whenever a value is updated, you have to replace the array (to trigger model change), and not just the value.

rahulthakur319 · Accepted Answer · 2015-09-30 12:25:36Z

0

I have figured out the solution to this by using $watch

//watch the Model to set slider when val in Model var changes
scope.$watch('model', function(newVal, oldVal){
   //check when Model is not initialized
   if (newVal !== undefined){
      elem.slider("value", parseInt(newVal,10));
       }
});

answered Sep 30, 2015 at 12:25

rahulthakur319

4735 silver badges16 bronze badges

Collectives™ on Stack Overflow

Two way data-binding in slider in AngularJS

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related