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

Question

我正在尝试使用 directive 通过 canvas 实现进度条。
我正在通过 JS 对象实现此控件

这里是非 Angular 方式:

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 Directive(指令)做同样的事情。这是我目前所拥有的:

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 属性(来自外部 Controller )对其进行操作。我需要 kProgress 指令的行为与非 Angular 解决方案完全一样。

Answer 1

我认为您上面的主要问题是您正在观看 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);
           });
        }        
    };
});

...并在 fiddle 中:http://jsfiddle.net/e7pbc7y5/23/ .只需更改文本框中的值，它就会更新进度条。