Question

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

我在一个带有隔离范围的可重复使用指令中使用了angular-knob。问题是，旋钮是alwyas＆＃34; NaN＆＃34;，并且永远不会影响模型。

另外，我从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

Answer 1

我已经创建了我自己的指令，它包装了jquery-knob插件，它还提供了我需要的一些很酷的行为（动画，不同颜色等），如果你愿意可以使用它并按你的意愿操纵它< / p>

//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

Answer 2

对于最新的角度1.4.8我正在使用这个指令，请注意它只适用于knobReadonly，knobMax选项，你需要添加一个手表来连接你想要角度玩的任何其他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);
        }
    };
}]);

jquery-knob在角度指令中总是NAN

2 个答案: