Question

我正在制定一项指令，我正面临一个问题。

基本上，在我的指令中，我试图使用插件（这个：https://github.com/soundar24/roundSlider），我收到了这个错误：

element.roundSlider不是函数

我的指令的代码如下：

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) + ' &deg;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

Answer 2

最后，我修复了添加

  element = $(el)
  element.roundSlider

它现在正在工作

angular directive - element。（...）未定义

2 个答案: