javascript - jquery-knob 在 Angular Directive(指令)中始终为 NAN

Question

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

我在具有隔离范围的可重用指令中使用 Angular 旋钮。问题是，旋钮始终为“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

Answer 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