type - Actualice dinámicamente ion.rangeSlider ngModel en la directiva AngularJS

ng model angularjs

Question

Estoy intentando actualizar el valor de un Ion.RangeSlider cuando Ion.RangeSlider su variable de ámbito de ng-model bound. El modelo se actualiza cuando se usa Ion.RangeSlider , pero no viceversa. Otras entradas con la misma actualización de ng-model cuando el valor del modelo cambia, por lo que este debe ser un caso especial.

Editar: ¡Woo! Aquí hay un fragmento de @lin :) También jsfiddle .

var app = angular.module(''ngModelIonRangeSliderDemo'', []);

app.controller(''MainCtrl'', function ($scope, $rootScope, $timeout) {
    
    $scope.someNumber = 10;
    
}).directive(''ionRangeSlider'', function ionRangeSlider() {
   return {
      restrict: ''A'',
      scope: {
         rangeOptions: ''='',
         model: ''=ngModel''
      },
      link: function (scope, elem, attrs) {
         scope.$watch(''model'',function () {
            elem.ionRangeSlider(scope.rangeOptions);
         });
      }
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.2/ui-bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.1.6/js/ion.rangeSlider.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.1.6/css/ion.rangeSlider.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.1.6/css/ion.rangeSlider.skinFlat.min.css" />

<div ng-app="ngModelIonRangeSliderDemo">
    <div ng-controller="MainCtrl" class="wrapper">
       <h3>Text input updates slider, but not vice-versa.</h3>
       <input ion-range-slider ng-model="someNumber" range-options="{min: -100, max: 100, step: .001}">
       <br/>
       <input type="text" ng-model="someNumber" class="form-control">
    </div>
</div>

He intentado todo tipo de sugerencias en más de diez publicaciones de desbordamiento de pila algo relacionadas (que es cómo he configurado el scope.$watch actual scope.$watch Watch scheme en ngModel), pero ninguna ha funcionado. No hay ningún error en mi consola. ¿Qué pasa? Además, ¿por qué no funciona sin mencionar el modelo en mi directiva? Por favor, avíseme si hay algo importante que no he incluido en esta publicación.

Answer 1

Simplemente use slider.update() dentro de su directiva y estará bien:

var app = angular.module(''myApp'', []);

app.controller(''MainCtrl'', function ($scope, $rootScope, $timeout) {

    $scope.someNumber = 15;
    $scope.apply = false;

}).directive(''ionRangeSlider'', function ionRangeSlider() {
   return {
      restrict: ''A'',
      scope: {
         rangeOptions: ''='',
         model: ''=ngModel'',
         apply: ''=apply''
      },
      link: function (scope, elem, attrs) {
         elem.ionRangeSlider(scope.rangeOptions);
         scope.$watch(''apply'',function () {
          if (scope.apply) {
            scope.apply = false;
            var slider = elem.data("ionRangeSlider");            
            slider.update({
               from: scope.model
            });
          }
         });
      }
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.2/ui-bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.1.6/js/ion.rangeSlider.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.1.6/css/ion.rangeSlider.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.1.6/css/ion.rangeSlider.skinFlat.min.css" />

<div ng-app="myApp" ng-controller="MainCtrl" class="wrapper">
  <h3>Text input updates slider and vice-versa.</h3>
  <input ion-range-slider ng-model="someNumber" apply="apply" range-options="{min: -100, max: 100, step: .001}">
  <br/>
  <input type="text" ng-model="someNumber" class="form-control" ng-change="apply = true">
</div>

Answer 2

Demostración adicional, cómo vinculante ion.rangeSlider para la entrada funciona:

http://jsfiddle.net/IonDen/r5aox84v/

var $range = $(".js-range-slider"),
    $inputFrom = $(".js-input-from"),
    $inputTo = $(".js-input-to"),
    instance,
    min = 0,
    max = 1000,
    from = 0,
    to = 0;

$range.ionRangeSlider({
    type: "double",
    min: min,
    max: max,
    from: 200,
    to: 800,
    onStart: updateInputs,
    onChange: updateInputs
});
instance = $range.data("ionRangeSlider");

function updateInputs (data) {
    from = data.from;
    to = data.to;

    $inputFrom.prop("value", from);
    $inputTo.prop("value", to); 
}

$inputFrom.on("input", function () {
    var val = $(this).prop("value");

    // validate
    if (val < min) {
        val = min;
    } else if (val > to) {
        val = to;
    }

    instance.update({
        from: val
    });
});

$inputTo.on("input", function () {
    var val = $(this).prop("value");

    // validate
    if (val < from) {
        val = from;
    } else if (val > max) {
        val = max;
    }

    instance.update({
        to: val
    });
});