Двухстороннее связывание данных в слайдере в AngularJS

Question

Двухстороннее связывание данных в слайдере в AngularJS

0

У меня есть прецедент, где мне нужна директива ползунка, чтобы динамически обновлять конфигурацию и значение модели через контроллер. Для этого я пытаюсь создать двухстороннюю привязку данных. Однако я не могу найти правильный способ создания двухсторонней привязки данных в директиве. Ниже приведен код. В настоящее время слайд-событие на слайдере запускает директиву для обновления "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);
            }
            });
        }
    }
});

Пожалуйста, помогите мне в этом. Я прошел все доступные ответы, но не смог найти подходящий ответ

rahulthakur319 30 сен. 2015, в 14:04

Источник

0

Вы можете создать его на plnkr.co/edit
Jai 30 сен. 2015, в 11:16
0

@Jai: Вот рабочий плункер: embed.plnkr.co/8kun1BfePtsNCK90HLdb/preview
rahulthakur319 30 сен. 2015, в 11:31

Теги:

javascript

jquery

angularjs

2 ответа

Ещё вопросы

@Jai: Вот рабочий плункер: embed.plnkr.co/8kun1BfePtsNCK90HLdb/preview

Ori Drori · Answer 1 · 2015-09-30T10-11-00.000Z

ngModelController свою директиву на 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>

Спасибо, Ори. Это именно то решение, которое я искал. Кстати, вы можете дать мне общее представление о том, как мы можем расширить его до Range Slider. Я возьму это оттуда
Используйте параметр диапазона ползунка пользовательского интерфейса Jquery. Модель должна быть массивом [ 75, 300 ] , и всякий раз, когда значение обновляется, вы должны заменить массив (чтобы вызвать изменение модели), а не только значение.

rahulthakur319 · Answer 2 · 2015-09-30T11-19-00.000Z

Я решил решить это, используя $ 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));
       }
});