angular的例子：
运行下面代码
<!DOCTYPEhtml><htmlng-app="APP"><head> <Metacharset="UTF-8"> <scriptsrc="http://cdn.bootcss.com/angular.js/1.3.0-beta.12/angular.min.js"></script> </head><bodyng-controller="MainCtrl"> <!-- 界面的这个元素会被替换成canvas元素;--> <divang:round:progressdata-round-progress-model="roundProgressData"></div> <br> <inputtype="number"ng-model="roundProgressData.label"/> <script> //引用angular.directives-round-progress这个模块; varAPP=angular.module('APP',['angular.directives-round-progress']). controller('MainCtrl',function($scope){ $scope.roundProgressData={//这个是初始化的数据;label:11,percentage:0.11 }//通过监听scope下的这个roundProgressData属性,对界面的canvas进行重绘;$scope.$watch('roundProgressData',function(newValue){ newValue.percentage=newValue.label/100; },true); });</script> <script> /*! *AngularJSRoundProgressDirective * *Copyright2013StephaneBegaudeau *ReleasedundertheMITlicense*/angular.module('angular.directives-round-progress',[]).directive('angRoundProgress',[function(){varcompilationFunction=function(templateElement,templateAttributes,transclude){if(templateElement.length===1){//初始化DOM模型,包括初始化canvas等; varnode=templateElement[0];varwidth=node.getAttribute('data-round-progress-width')||'400';varheight=node.getAttribute('data-round-progress-height')||'400';varcanvas=document.createElement('canvas'); canvas.setAttribute('width',width); canvas.setAttribute('height',height); canvas.setAttribute('data-round-progress-model',node.getAttribute('data-round-progress-model'));//相当于demo,替换原来的元素;node.parentNode.replaceChild(canvas,node);//各种配置; varouterCircleWidth=node.getAttribute('data-round-progress-outer-circle-width')||'20';varinnerCircleWidth=node.getAttribute('data-round-progress-inner-circle-width')||'5';varouterCircleBackgroundColor=node.getAttribute('data-round-progress-outer-circle-background-color')||'#505769';varouterCircleForegroundColor=node.getAttribute('data-round-progress-outer-circle-foreground-color')||'#12eeb9';varinnerCircleColor=node.getAttribute('data-round-progress-inner-circle-color')||'#505769';varlabelColor=node.getAttribute('data-round-progress-label-color')||'#12eeb9';varouterCircleRadius=node.getAttribute('data-round-progress-outer-circle-radius')||'100';varinnerCircleRadius=node.getAttribute('data-round-progress-inner-circle-radius')||'70';varlabelFont=node.getAttribute('data-round-progress-label-font')||'50ptCalibri';return{ pre:functionpreLink(scope,instanceElement,instanceAttributes,controller){varexpression=canvas.getAttribute('data-round-progress-model');//监听模型,O了 //就监听一个属性;scope.$watch(expression,function(newValue,oldValue){//Createthecontentofthecanvas //包括新建和重绘; varctx=canvas.getContext('2d'); ctx.clearRect(0,width,height);//The"background"circle varx=width/2;vary=height/2; ctx.beginPath(); ctx.arc(x,y,parseInt(outerCircleRadius),Math.PI*2,false); ctx.lineWidth=parseInt(outerCircleWidth); ctx.strokeStyle=outerCircleBackgroundColor; ctx.stroke();//Theinnercirclectx.beginPath(); ctx.arc(x,parseInt(innerCircleRadius),false); ctx.lineWidth=parseInt(innerCircleWidth); ctx.strokeStyle=innerCircleColor; ctx.stroke();//Theinnernumberctx.font=labelFont; ctx.textAlign='center'; ctx.textBaseline='middle'; ctx.fillStyle=labelColor; ctx.fillText(newValue.label,x,y);//The"foreground"circle varstartAngle=-(Math.PI/2);varendAngle=((Math.PI*2)*newValue.percentage)-(Math.PI/2);varanticlockwise=false; ctx.beginPath(); ctx.arc(x,startAngle,endAngle,anticlockwise); ctx.lineWidth=parseInt(outerCircleWidth); ctx.strokeStyle=outerCircleForegroundColor; ctx.stroke(); },true); },post:functionpostLink(scope,controller){} }; } };varroundProgress={//compile里面先对dom进行操作,再对$socpe进行监听;compile:compilationFunction,replace:true };returnroundProgress; }]);</script></body></html>
