Javascript AngularJS在指令模板中使用画布

我正在尝试使用

指令
使用
画布
实现进度条

我希望elrady通过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();
    }

  }

函数进度条（id，contentDiv）
{
this.id=id；
这个高度=2；
这个宽度=200；
this.backColor=“#3838”；
this.foreColor=“#61650c”；
该值=0；
this.context=null；
this.backToZero=true；
this.create=函数（）
{
var str=“”；
str+=”；
str+=”；
str+=”；
$（“#”+contentDiv.html（str）；
this.drawingCanvas=document.getElementById（'canvas_u'+this.id）；
this.context=this.drawingCanvas.getContext（'2d'）；
这个.draw（）；
}
this.draw=函数（）
{
var ctx=this.context；
ctx.fillStyle=this.backColor；
ctx.fillRect（0，0，this.width，this.height）；
var pos=此值/100*此宽度；
ctx.fillStyle=此.foreColor；
ctx.fillRect（0，0，位置，此高度）；
}
this.setValue=函数（值）
{
这个值=值；
如果（值>=100）
{
如果（此返回零）
{
该值=0；
}
}
这个.draw（）；
}
}

我试着用角度指令做同样的事情。
以下是我迄今为止的情况：

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)
            });
        }
    };
});

KApp.指令（“kProgress”，函数（）
{
返回{
限制：'E'，
范围：{
progressStatus:'=进度'，
progressWidth:“@”，
progressHeight:“@”，
progressId:“@”
},
模板：“”
+""
+"",
链接：函数（范围、元素、属性）{
范围$watch（attrs.progressStatus，函数（值）{
//更改画布（从模板）
});
}
};
});

我的问题是：如何从模板中获取（或访问）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);
           });
        }        
    };
});

var模块=角度
.module（'progressBarApp'，[]）
.指令（“progressBar”，函数（）
{
返回{
限制：'E'，
范围：{
进度：'='，
progressId:“@”
},
template:“这不一样！我不需要与另一个指令“通信”，我只需要与模板中的元素“通信”您是否尝试过element.find（）？并尝试postLink函数。