AngularJS中的滑塊中的兩種數據綁定

Question

我有一個用例，我需要滑塊指令來通過控制器動態更新配置和模型值。 為此，我試圖創建一種雙向數據綁定。 但是，我找不到在指令中創建雙向數據綁定的正確方法。 以下是代碼。 當前，滑塊上的滑動事件觸發指令以更新“ scope.model”。 盡管它不響應“ scope.config”或“ 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);
            }
            });
        }
    }
});

請幫助我。 我已經查看了所有可用的答案，但找不到合適的答案

Answer 1

您的指令基於ngModelController 。 這樣，您可以使用ngModel功能綁定所有內容，並使用ngChange運行回調，而無需$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));
      }

    }
  }
});

用法：

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

Answer 2

我已經通過使用$ 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));
       }
});