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

Answer 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>

Answer 2

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));
       }
});