AngularJS : directive to draw on a canvas.

AngularJS : directive to draw on a canvas.

by Daan De Smedt

HTML

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<div ng-app="app" id="console-log">

  <button-directive></button-directive>
  <button-directive></button-directive>

</div>

CSS

.classRed {
  background-color: red
}

.classBlue {
  background-color: blue
}

.classYellow {
  background-color: yellow
}

.btn {
  display: block;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  border: none;
  outline: none;
}

JavaScript

/* ANGULAR */
angular
  .module('app', [])
  .directive('buttonDirective', buttonDirective)

function buttonDirective() {
  return {
    restrict: "E",
    scope : {},
    controller: function($scope) {

      $scope.value1 = false;
      $scope.value2 = true;
      $scope.value3 = false;

      $scope.colorChange = function() {
 				console.log('change');
        $scope.temp3 = $scope.value3;
        $scope.value3 = $scope.value2;
        $scope.value2 = $scope.value1;
        $scope.value1 = $scope.temp3;
      }
    },
    template: '<button class="btn" ng-class="{classRed:value1, classBlue:value2, classYellow:value3}" ng-click="colorChange()"></button>'
  };
}