Angular SVG test

by Bram Gadeyne

HTML

<div>
	<svg width="100" height="100">
		<g angular-circle></g>
	</svg>
</div>

CSS

.angular-circle{
	stroke: green;
	stroke-width: 4; 
	fill: yellow;
}

JavaScript

(function(angular){
	function AngularCircleController($scope, $interval){
		var nrCircleCtrl=this;
		
		$scope.cx=50;
		$scope.cy=50;
		$scope.r=40;
		
		$scope.amount = 2;
		
		$interval(function(){
			$scope.cx=$scope.cx - $scope.amount;
			$scope.cy=$scope.cy - $scope.amount;
			$scope.r=$scope.r - $scope.amount;
		}, 100,19)
		
		$scope.click=function(){
			$scope.amount=-$scope.amount;
		}
		
		return nrCircleCtrl;
	};
	
	function AngularCircle(){
		return {
			restrict:'A',
			template:'<circle ng-controller="AngularCircleController as nrCircleCtrl" ng-attr-cx="{{cx}}" ng-attr-cy="{{cy}}" ng-attr-r="{{r}}" ng-click="click()" class="angular-circle" />'
		};
	}
	
	angular.module('testapp',[])
		.controller('AngularCircleController',['$scope','$interval',AngularCircleController])
		.directive('angularCircle',[AngularCircle]);
})(angular);