角度指令中的jquery-knob总是NAN答案

【问题标题】：jquery-knob always NAN in angular directive角度指令中的jquery-knob总是NAN
【发布时间】：2014-08-26 22:50:16
【问题描述】：

我看过这篇文章：jQuery Knob displays NaN when value is 0。它似乎没有回答我的问题。

我在具有隔离范围的可重用指令中使用 angular-knob。问题是，旋钮总是“NaN”，从不影响模型。

另外，我从 angular-knob 项目中提取了指令并将其作为主应用程序的指令，因为导入 ui-knob 模块也不起作用：

app.directive("knob", function () { //Doesn't crash
return {
vs...
var app = angular.module("app", ["ui.knob"]); //Injection exception occurs.

这是一个笨蛋：http://plnkr.co/edit/g6UK6RIFA2xfT59z8sjN?p=preview

有人知道怎么解决吗？

编辑：我创建了另一个版本，更简单，除了手动编译似乎不起作用：http://plnkr.co/edit/naG6ObMtad8nvHGOrhwI?p=preview

【问题讨论】：

标签： javascript jquery angularjs jquery-ui angularjs-directive

【解决方案1】：

我创建了我自己的指令来包装 jquery-knob 插件，它还提供了我需要的一些很酷的行为（动画、不同的颜色等），如果你喜欢可以使用它并根据需要进行操作

//jquery-knob directive
.directive('knob', function() {

  function link( scope, element , attr ) {

    function draw() {
      element.empty();

      var tmpl = $('<input type="text">');

      var min = attr.min ? parseInt(attr.min) : 0;
      var max = attr.max ? parseInt(attr.max) : 0;
      var val = attr.value ? parseInt(attr.value) : "";
      var readonly = attr.readonly == "true" ? true : false;
      var sign = attr.sign ? attr.sign : "";
      var fgColor = "#00A65A"; //green - success

      var dangerLimit = attr.dangerLowerThen;
      var warnLimit = attr.warnLowerThen;

      if(dangerLimit && val < dangerLimit) {
        fgColor = "#F56954"; //red - danger
      } else if(warnLimit && val < warnLimit) {
        fgColor = "#F39C12"; //yellow - warning
      }

      element.append(tmpl);

      var options = {
        value : 0,
        min : min,
        max : max > val ? max : val,
        dynamicDraw: true,
        fgColor : fgColor,
        readOnly : readonly,
        rtl : (attr.dir == 'rtl' ? true : false),
        draw : function () { $(this.i).val(this.cv + sign); }
      };
      tmpl.knob(options);

      tmpl.animate({
        value: 100
      }, {
        duration: 1000,
        easing: 'swing',
        progress: function () {
          $(this).val(Math.round(this.value/100 * val)).trigger('change');
        }
      })

    }

    scope.$watch(function () {
      return [attr.value, attr.max, attr.min , attr.readonly];
    }, draw, true);

  };

JSFiddle example

【讨论】：

【解决方案2】：

对于最新的 angular 1.4.8，我正在使用此指令，请注意它仅适用于 kubReadonly、knobMax 选项，您需要添加一个手表来连接您希望 angular 使用的任何其他 jqueryknob api 选项。

<knob knob-data="order.items[$index].Quantity" knob-readonly="order.isClosed" data-displayprevious="true" data-angleoffset="-100" data-anglearc="200" data-step="1" data-min="1" knob-max="order.items[$index].QuantityLimit"></knob>

angular.module('ui.knob', []).directive('knob', ['$timeout', function ($timeout) {
    return {
        restrict: 'EA',
        replace: true,
        template: '<input value="{{ knobData }}" />',
        scope: {
            knobData: '=',
            knobMax: '=',
            knobReadonly: '=',
            knobOptions: '&'
        },
        link: function ($scope, $element, $attrs) {
            var knobInit = $scope.knobOptions() || { 'max': $scope.knobMax, 'readOnly': $scope.knobReadonly };

            knobInit.release = function (newValue) {
                $timeout(function () {
                    $scope.knobData = newValue;
                    $scope.$apply();
                }, 0, false);
            };

            $scope.$watch('knobData', function (newValue, oldValue) {
                if (newValue !== oldValue) {
                    $($element).val(newValue).change();
                }
            });

            $scope.$watch('knobMax', function (newValue) {
                $scope.knobMax = newValue;
            });

            $scope.$watch('knobReadonly', function (newValue) {
                $scope.knobReadonly = newValue;
            });
            
            $($element).val($scope.knobData).knob(knobInit);
        }
    };
}]);

【讨论】：