AngularJS Ion.RangeSlider не обновляет минимальное и максимальное значение динамически при изменении конкретной кнопки

У меня есть директива для слайдера, который использует ionRangeSlider. При нажатии кнопки смешанные и максимальные значения изменяются, но они не обновляются в директиве. Я добавил функцию просмотра в ссылку.

Ниже приведена директива слайдера.

var app = angular.module('ionSlider',[]);
app.directive('ionslider',function($timeout){
return{
    restrict:'AE',
    require: 'ngModel',
    scope:{
    options:'='
    },
    template:'<div id="{{id}}" ></div>',
    replace:true,
    link:function($scope, $element, attrs, ngModel) {
       // //function init(){
        var init =function(){
            $element.ionRangeSlider({
                min: $scope.options.min,
                max: $scope.options.max,
                type: $scope.options.type,
                prefix: $scope.options.prefix,
                maxPostfix: $scope.options.maxPostfix,
                prettify: $scope.options.prettify,
                hasGrid: $scope.options.hasGrid,
                gridMargin: $scope.options.gridMargin,
                postfix:$scope.options.postfix,
                from:$scope.options.from,
                step:$scope.options.step,
                hideMinMax:$scope.options.hideMinMax,
                hideFromTo:$scope.options.hideFromTo,
                onChange:$scope.options.onChange
            });
        };
        init();
      //OnChange
     var    update = function()
        {
         $element.ionRangeSlider ({
              min: $scope.options.min,
                max: $scope.options.max,
                type: $scope.options.type,
                prefix: $scope.options.prefix,
                maxPostfix: $scope.options.maxPostfix,
                prettify: $scope.options.prettify,
                hasGrid: $scope.options.hasGrid,
                gridMargin: $scope.options.gridMargin,
                postfix:$scope.options.postfix,
                from:$scope.options.from,
                step:$scope.options.step,
                hideMinMax:$scope.options.hideMinMax,
                hideFromTo:$scope.options.hideFromTo,
                onChange:$scope.options.onChange
         });

        };
    //watch
      $scope.$watch('options', function(value) {
        $timeout(function(){ update(); }); 

      });
     }
    }
});

Код HTML для того же, как показано ниже:

    <td  style="width:30%;" class="normal_row"><span><input ng-model="ldcInput.value" type="text" id={{key}} ionslider options="{'min':ldcInput.minValue,'max':ldcInput.maxValue,'step':ldcInput.step}" ng-change="mathCalculation(ldcInput)"/></span></td>

Приведенные выше значения ползунка для минимального и максимального значения изменяются в зависимости от нажатия кнопки. Но это не отражено в слайдере. Пожалуйста, дайте мне знать, где я ошибаюсь в директиве.


javascript html jquery angularjs rangeslider
person Vijay    schedule 21.01.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Поскольку ion.RangeSlider внедряется jQuery, вы не можете обновить ни один из его атрибутов, снова вызвав инъекцию.

Я улучшил уже существующую директиву, добавив в эту вилку обновляемые атрибуты и некоторые отсутствующие, что решит вашу проблему. Пример того, как его использовать, можно найти на странице github.

/**
 * Created by Abdullah on 9/19/14.
 * 
 * Modified and enhanced by Juergen Wahlmann on 3/5/15
 */

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


app.directive('ionslider',function($timeout){
return{
    restrict:'E',
    scope:{min:'=',
        max:'=',
        type:'@',
        prefix:'@',
        maxPostfix:'@',
        prettify:'@',
        hasGrid:'@',
        gridMargin:'@',
        postfix:'@',
        step:'@',
        hideMinMax:'@',
        hideFromTo:'@',
        from:'=',
        disable:'=',
        onChange:'=',
        onFinish:'='

    },
    template:'<div></div>',
    replace:true,
    link:function($scope,$element,attrs){
        (function init(){
            $($element).ionRangeSlider({
                min: $scope.min,
                max: $scope.max,
                type: $scope.type,
                prefix: $scope.prefix,
                maxPostfix: $scope.maxPostfix,
                prettify: $scope.prettify,
                hasGrid: $scope.hasGrid,
                gridMargin: $scope.gridMargin,
                postfix:$scope.postfix,
                step:$scope.step,
                hideMinMax:$scope.hideMinMax,
                hideFromTo:$scope.hideFromTo,
                from:$scope.from,
                disable:$scope.disable,
                onChange:$scope.onChange,
                onFinish:$scope.onFinish
            });
        })();
        $scope.$watch('min', function(value) {
            $timeout(function(){ $($element).data("ionRangeSlider").update({min: value}); });
        },true);
        $scope.$watch('max', function(value) {
            $timeout(function(){ $($element).data("ionRangeSlider").update({max: value}); });
        });
        $scope.$watch('from', function(value) {
            $timeout(function(){ $($element).data("ionRangeSlider").update({from: value}); });
        });
        $scope.$watch('disable', function(value) {
            $timeout(function(){ $($element).data("ionRangeSlider").update({disable: value}); });
        });
    }
}
});

ionRangeSlider-Angular-Directive

person Jürgen 'Kashban' Wahlmann    schedule 05.03.2015
comment
Эй, Юрген, я понимаю, что ты опубликовал это когда-то назад. Prettify кажется неправильно названным prettify: '@' вместо prettify: '=' ... в любом случае я не могу заставить prettify сработать. - person Jonathan; 28.01.2016
comment
@Jonathan, к сожалению, у меня больше нет доступа к этому проекту, поэтому я не могу проверить или протестировать что-либо, связанное с ним. Я надеюсь, что вы ее решить. - person Jürgen 'Kashban' Wahlmann; 03.02.2016
comment
Спасибо за ваш ответ. Я обновил свою версию iorangeslider и исправил вышеуказанную проблему, и теперь все работает хорошо. Спасибо за ваш ответ! - person Jonathan; 04.02.2016