css代码：
<style type="text/css">
body{
font-size: 13px;
}
a:link{
text-decoration: none;
}
a:visited{
text-decoration: none;
}
#main{
margin: 0 auto;
width: 200px;
text-align: center;
}
</style>
html：
<!DOCTYPE html>
<html lang="en" ng-app="">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../bower_components/angular/angular.min.js"></script>
</head>
<body>
<h1>圆形进度条效果</h1>
<div id="main" ng-controller="ctrl_progress">
<div load-progress progress-model="ProgressValue"></div>
<button ng-click="start()">开始</button>
</div>
</body>
<script type="text/javascript" src="js/app.js"></script>
</html>
js代码：
/**
* Created by Administrator on 2016/8/30.
*/
angular.module('angular.directives-load-progress',[])
.directive('loadProgress',[
function () {
return {
replace:true,
compile:function (tplele,tplattr,transclude) {
if(tplele.length === 1){
var node = tplele[0];
var width = node.getAttribute('progress-width') || '200';
var height = node.getAttribute('progress-height')||'200';
var canvas = document.createElement('canvas');
canvas.setAttribute('width',width);
canvas.setAttribute('height',height);
canvas.setAttribute('progress-model',node.getAttribute('progress-model'));
node.parentNode.replaceChild(canvas,node);
var ocwidth = node.getAttribute('progress-outer-circle-width')||'20';
var icwidth = node.getAttribute('progress-inner-circle-width')||'5';
var ocbcolor = node.getAttribute('progress-outer-circle-background-color')||'#666';
var ocfcolor = node.getAttribute('progress-outer-circle-foreground-color')||'#eee';
var iccolor = node.getAttribute('progress-inner-circle-color')||'#666';
var lblcolor = node.getAttribute('progress-label-color')||'#eee';
var ocradius = node.getAttribute('progress-outer-circle-radius')||'80';
var icradius = node.getAttribute('progress-inner-circle-radius')||'50';
var lblfont = node.getAttribute('progress-label-font')||'30pt Arial';
return {
pre: function preLink(scope,instanceElement,instanceAttributes,controller) {
var expression = canvas.getAttribute('progress-model');
scope.$watch(expression,function (newValue,oldValue) {
var ctx = canvas.getContext('2d');
ctx.clearRect(0,0,width,height);
var x = width / 2;
var y = height / 2;
ctx.beginPath();
ctx.arc(x,y,parseInt(ocradius),0,Math.PI*2,false);
ctx.lineWidth = parseInt(ocwidth);
ctx.strokeStyle = ocbcolor;
ctx.stroke();
ctx.beginPath();
ctx.arc(x,y,parseInt(icradius),0,Math.PI*2,false);
ctx.lineWidth = parseInt(icwidth);
ctx.strokeStyle = iccolor;
ctx.stroke();
ctx.font = lblfont;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillStyle = lblcolor;
ctx.fillText(newValue.label,x,y);
var startAngle = -(Math.PI/2);
var endAngle = ((Math.PI*2) * newValue.percentage) - (Math.PI / 2);
var anticlockwise = false;
ctx.beginPath();
ctx.arc(x,y,parseInt(ocradius),startAngle,endAngle,anticlockwise);
ctx.lineWidth = parseInt(ocwidth);
ctx.strokeStyle = ocfcolor;
ctx.stroke();
var startAngle1 = -(Math.PI/2);
var endAngle1 = ((Math.PI*2) * newValue.percentage) - (Math.PI / 2);
var anticlockwise1 = false;
ctx.beginPath();
ctx.arc(x,y,parseInt(icradius),startAngle1,endAngle1,anticlockwise1);
ctx.lineWidth = parseInt(icwidth);
ctx.strokeStyle = ocfcolor;
ctx.stroke();
},true);
}
}
}
}
}
}
]);
angular.module('progress',['angular.directives-load-progress'])
.controller('ctrl_progress',function ($scope,$interval) {
$scope.ProgressValue = {
label : 0,
percentage:0.00
};
$scope.$watch('ProgressValue',function (newValue) {
newValue.percentage = newValue.label / 100;
},true);
$scope.start = function (t) {
var i = 0;
var n = $interval(function () {
i++;
$scope.ProgressValue.label = i;
if(i == 100){
$interval.cencel(n);
}
},500);
}
});
看控制台，点进去是官方解释：
error
谁能帮我看看是什么原因导致的吗？谢谢了！