角度指令 - 元素（...）未定義

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

在年底前加入roundSlider的JavaScript，我固定它添加

element = $(el) 
    element.roundSlider 

現在正在工作

Answer 2

嘗試利用它