javascript - AngularJS在指令模板中使用 Canvas

我正在尝试使用canvas用directive实现进度栏。
我很高兴通过JS对象实现此控制

这是非角度方式：

function progressBar(id,contentDiv)
{
    this.id = id;
    this.height = 2;
    this.width = 200;
    this.backColor = "#383838";
    this.foreColor = "#61650c";
    this.value = 0;
    this.context = null;
    this.backToZero = true;

    this.create = function ()
    {
        var str = "";
        str += "<div class='progressBarDiv' id='" + this.id + "' style='width: " + this.width + "px;'>";
        str += "<canvas id='canvas_" + this.id + "' class='progressBarCanvas' width='" + this.width + "' height='" + this.height + "' style='width: " + this.width + "px;'/>";
        str += "</div>";

        $("#" + contentDiv).html(str);

        this.drawingCanvas = document.getElementById('canvas_' + this.id);
        this.context = this.drawingCanvas.getContext('2d');
        this.draw();
    }

    this.draw = function ()
    {
        var ctx = this.context;
        ctx.fillStyle = this.backColor;
        ctx.fillRect(0, 0, this.width, this.height);
        var pos = this.value / 100 * this.width;
        ctx.fillStyle = this.foreColor;
        ctx.fillRect(0, 0, pos, this.height);
    }

    this.setValue = function (value)
    {
        this.value = value;
        if (value >= 100)
        {
            if (this.backToZero)
            {
                this.value = 0;
            }
        }
        this.draw();
    }

  }

我试图用angular指令做同样的事情。
这是我到目前为止所拥有的：

KApp.directive("kProgress", function ()
{
    return {
        restrict: 'E',
        scope: {
            progressStatus: '=progress',
            progressWidth:'@',
            progressHeight:'@',
            progressId:'@'
        },
        template: "<div class='progressBarDiv' style='width: " + {{progressWidth}} + "px;'>"
                       +"<canvas id='canvas_" + {{progressId}} + "' class='progressBarCanvas' width='" + {{progressWidth}} + "' height='" +  {{progressHeight}} + "' style='width: " +  {{progressWidth}} + "px;'/>"
                 +"</div>",
        link: function(scope, element, attrs) {

            scope.$watch(attrs.progressStatus, function(value) {
              //Change the canvas (from the template)
            });
        }
    };
});

我的问题是：如何从模板获取（或访问）canvas元素，并根据progressStatus属性（来自外部控制器）对其进行操作。我需要kProgress指令将完全类似于非角度解决方案。

最佳答案

我认为您上面的主要问题是您正在观看attrs.progressStatus而不是仅观看progressStatus。这有效：

var module = angular
  .module('progressBarApp', [])
  .directive("progressBar", function ()
  {
    return {
        restrict: 'E',
        scope: {
            progress: '=',
            progressId: '@'
        },
        template: "<canvas id='pgcanvas' width='400' height='30'  background-color: #F00'/>",
        link: function(scope, element, attrs) {
           console.log(element);
           scope.canvas = element.find('canvas')[0];
           scope.context = scope.canvas.getContext('2d');

           scope.$watch('progress', function(newValue) {
             barWidth = Math.ceil(newValue / 100 * scope.canvas.width);
             scope.context.fillStyle = "#DDD";
             scope.context.fillRect(0, 0, scope.canvas.width, scope.canvas.height);
             scope.context.fillStyle = "#F00";
             scope.context.fillRect(0, 0, barWidth, scope.canvas.height);
           });
        }
    };
});

...并且摆弄：http://jsfiddle.net/e7pbc7y5/23/。只需在文本框中更改值，它将更新进度条。