<script><br />
//引用angular.directives-round-progress这个模块;<br />
var APP = angular.module('APP', ['angular.directives-round-progress']).<br />
controller('MainCtrl', function($scope) {<br />
$scope.roundProgressData = {<br />
//这个是初始化的数据;<br />
label: 11,<br />
percentage: 0.11<br />
}<br />
//通过监听scope下的这个roundProgressData属性, 对界面的canvas进行重绘;<br />
$scope.$watch('roundProgressData', function (newValue) {<br />
newValue.percentage = newValue.label / 100;<br />
}, true);<br />
});<br />
</script>
<script><br />
/*!<br />
* AngularJS Round Progress Directive<br />
*<br />
* Copyright 2013 Stephane Begaudeau<br />
* Released under the MIT license<br />
*/<br />
angular.module('angular.directives-round-progress', []).directive('angRoundProgress', [function () {<br />
var compilationFunction = function (templateElement, templateAttributes, transclude) {<br />
if (templateElement.length === 1) {<br />
//初始化DOM模型, 包括初始化canvas等;<br />
var node = templateElement[0];<br />
var width = node.getAttribute('data-round-progress-width') || '400';<br />
var height = node.getAttribute('data-round-progress-height') || '400';<br />
var canvas = document.createElement('canvas');<br />
canvas.setAttribute('width', width);<br />
canvas.setAttribute('height', height);<br />
canvas.setAttribute('data-round-progress-model', node.getAttribute('data-round-progress-model'));<br />
//相当于demo, 替换原来的元素;<br />
node.parentNode.replaceChild(canvas, node);<br />
//各种配置;<br />
var outerCircleWidth = node.getAttribute('data-round-progress-outer-circle-width') || '20';<br />
var innerCircleWidth = node.getAttribute('data-round-progress-inner-circle-width') || '5';<br />
var outerCircleBackgroundColor = node.getAttribute('data-round-progress-outer-circle-background-color') || '#505769';<br />
var outerCircleForegroundColor = node.getAttribute('data-round-progress-outer-circle-foreground-color') || '#12eeb9';<br />
var innerCircleColor = node.getAttribute('data-round-progress-inner-circle-color') || '#505769';<br />
var labelColor = node.getAttribute('data-round-progress-label-color') || '#12eeb9';<br />
var outerCircleRadius = node.getAttribute('data-round-progress-outer-circle-radius') || '100';<br />
var innerCircleRadius = node.getAttribute('data-round-progress-inner-circle-radius') || '70';<br />
var labelFont = node.getAttribute('data-round-progress-label-font') || '50pt Calibri';<br />
return {<br />
pre: function preLink(scope, instanceElement, instanceAttributes, controller) {<br />
var expression = canvas.getAttribute('data-round-progress-model');<br />
//监听模型, O了<br />
//就监听一个属性;<br />
scope.$watch(expression, function (newValue, oldValue) {<br />
// Create the content of the canvas<br />
//包括新建和重绘;<br />
var ctx = canvas.getContext('2d');<br />
ctx.clearRect(0, 0, width, height);<br />
// The "background" circle<br />
var x = width / 2;<br />
var y = height / 2;<br />
ctx.beginPath();<br />
ctx.arc(x, y, parseInt(outerCircleRadius), 0, Math.PI * 2, false);<br />
ctx.lineWidth = parseInt(outerCircleWidth);<br />
ctx.strokeStyle = outerCircleBackgroundColor;<br />
ctx.stroke();<br />
// The inner circle<br />
ctx.beginPath();<br />
ctx.arc(x, y, parseInt(innerCircleRadius), 0, Math.PI * 2, false);<br />
ctx.lineWidth = parseInt(innerCircleWidth);<br />
ctx.strokeStyle = innerCircleColor;<br />
ctx.stroke();<br />
// The inner number<br />
ctx.font = labelFont;<br />
ctx.textAlign = 'center';<br />
ctx.textBaseline = 'middle';<br />
ctx.fillStyle = labelColor;<br />
ctx.fillText(newValue.label, x, y);<br />
// The "foreground" circle<br />
var startAngle = - (Math.PI / 2);<br />
var endAngle = ((Math.PI * 2 ) * newValue.percentage) - (Math.PI / 2);<br />
var anticlockwise = false;<br />
ctx.beginPath();<br />
ctx.arc(x, y, parseInt(outerCircleRadius), startAngle, endAngle, anticlockwise);<br />
ctx.lineWidth = parseInt(outerCircleWidth);<br />
ctx.strokeStyle = outerCircleForegroundColor;<br />
ctx.stroke();<br />
}, true);<br />
},<br />
post: function postLink(scope, instanceElement, instanceAttributes, controller) {}<br />
};<br />
}<br />
};<br />
var roundProgress = {<br />
//compile里面先对dom进行操作, 再对$socpe进行监听;<br />
compile: compilationFunction,<br />
replace: true<br />
};<br />
return roundProgress;<br />
}]);<br />
</script>
