угловая директива - элемент. (...) не определено

Question

Я работаю над директивой, и перед вами стоит проблема.

В принципе, в моей директиве я пытаюсь использовать плагин (это: https://github.com/soundar24/roundSlider), и я получаю эту ошибку:

element.roundSlider is not a function

Код для моей директивы является следующее:

angular.module('myPicker', []).directive('picker', [ 
    "$timeout", function($timeout) { 
    var linkFunction, setColor; 
    setColor = function(value) { 
     var el, temperatureValue; 
     el = $('.rs-range-color'); 
     temperatureValue = parseInt(value); 
     el.attr('class', ''); 
     return el.addClass('rs-path rs-transition rs-range-color animate-color-change temp-' + temperatureValue); 
    }; 
    $.fn.roundSlider.prototype.defaults.create = function() { 
     var endLabel, numberTag1, numberTag2, o, startLabel; 
     o = this.options; 
     startLabel = this._valueToAngle(o.min); 
     numberTag1 = this._addSeperator(startLabel, 'rs-tooltip-text custom-label num1 '); 
     numberTag1.children().html(o.min).rsRotate(-startLabel); 
     endLabel = this._valueToAngle(o.max); 
     numberTag2 = this._addSeperator(endLabel, 'rs-tooltip-text custom-label num2 '); 
     numberTag2.children().html(o.max).rsRotate(-endLabel); 
     return setColor(o.value); 
    }; 
    linkFunction = function(scope, element, attrs) { 
     var hiddenElement; 
     element.roundSlider({ 
     min: attrs.min, 
     max: attrs.max, 
     radius: attrs.size, 
     sliderType: 'min-range', 
     startAngle: 315, 
     circleShape: 'pie', 
     width: attrs.width, 
     value: attrs.value, 
     step: 0.5, 
     editableTooltip: false, 
     tooltipFormat: function(attrs) { 
      return attrs.value.toFixed(1) + ' °C'; 
     } 
     }); 
     if (scope.tempPicker.provvisorial === null) { 
     scope.tempPicker.provvisorial = attrs.value; 
     } 
     element.on('change drag', function(e) { 
     if (e.value !== void 0) { 
      return scope.$apply(function() { 
      return setColor(e.value); 
      }); 
     } 
     }); 
     element.on('stop', function(e) { 
     return scope.tempPicker.provvisorial = e.value; 
     }); 
     element.on('change', function(e) { 
     return scope.tempPicker.provvisorial = e.value; 
     }); 
     scope.$on('$destroy', function() { 
     element.roundSlider("destroy"); 
     return element.remove(); 
     }); 
     hiddenElement = angular.element("#picker-hidden-text-box"); 
     return hiddenElement.on('change', function() { 
     element.roundSlider("option", "value", parseInt(hiddenElement.val())); 
     return scope.tempPicker.provvisorial = parseInt(hiddenElement.val()); 
     }); 
    }; 
    return { 
     restrict: 'E', 
     templateUrl: './directives/Picker/Picker.tpl.html', 
     replace: true, 
     link: linkFunction 
    }; 
    } 
]); 

Теперь, я не понимаю:

Я также изменяю функцию для плагина roundSlider $.fn.roundSlider.prototype.defaults.create = function() {..., и он работает здесь. Я вижу, что $ .fn.roundSlider на самом деле существует и не определен.

Я действительно не знаю, почему это делается, любая идея?

Я также попытался использовать angular.element.roundSlider (как отмечено здесь: https://medium.com/@darilldrems/angularjs-jquery-in-angularjs-directive-96ad3d150d86#.4mc3ymoq6), но я получаю ту же ошибку

Если вам нужен любой другой кусок кода, не стесняйтесь спросить

благодаря

Answer 1

в конце концов, я установил, что добавление

element = $(el) 
    element.roundSlider 

сейчас работает

Answer 2

Попробуйте добавить roundSlider JavaScript, прежде чем использовать ее