Assign value to inline Javascript using angular JS

Question

I wanted to load a canvas to calculate the profile meter for user. I calculated the the value and assigned it to a angular scope variable. My canvas code is in the inline javascript. How can I assign the value to the variable in inline javascript?

here's the code to the Canvas and my jade file:

var ctx = document.getElementById('my_canvas').getContext('2d');
  var al= document.getElementById('my_canvas').value;
  var start = 4.72;
  var cw = ctx.canvas.width;
  var ch = ctx.canvas.height; 
  var diff;
  function progressSim(){
    diff = ((al / 100) * Math.PI*2*10).toFixed(2);
    ctx.clearRect(0, 0, cw, ch);
    ctx.lineWidth = 10;
    ctx.fillStyle = '#09F';
    ctx.strokeStyle = "#09F";
    ctx.textAlign = 'center';
    ctx.fillText(al+'%', cw*.5, ch*.5+2, cw);
    ctx.beginPath();
    ctx.arc(35, 35, 30, start, diff/10+start, false);
    ctx.stroke();
  }
  progressSim();

<!-- canvas(id="my_canvas" width="70" height="70") -->
<canvas id="my_canvas" width="70" height="70" />

and also is there a better approach to do this?

here's the working Plunker ! https://plnkr.co/edit/5qKZ9fGY1miinouWC7Iy

yes !! I want to assign the value of scope variable instead of 50. — Sajak Upadhyaya
– Sajak Upadhyaya, Commented Dec 29, 2016 at 7:14

Ram_T · Accepted Answer · 2016-12-29 07:18:11Z

1

Remove inline code and add it in app.js and Please find the changes $scope.canvas instead of al

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.canvas = 70;
  var ctx = document.getElementById('my_canvas').getContext('2d');
  var start = 4.72;
  var cw = ctx.canvas.width;
  var ch = ctx.canvas.height; 
  var diff;
  function progressSim(){
    diff = (($scope.canvas / 100) * Math.PI*2*10).toFixed(2);
    ctx.clearRect(0, 0, cw, ch);
    ctx.lineWidth = 10;
    ctx.fillStyle = '#09F';
    ctx.strokeStyle = "#09F";
    ctx.textAlign = 'center';
    ctx.fillText($scope.canvas+'%', cw*.5, ch*.5+2, cw);
    ctx.beginPath();
    ctx.arc(35, 35, 30, start, diff/10+start, false);
    ctx.stroke();
  }
  progressSim();
});

answered Dec 29, 2016 at 7:18

Ram_T

8,50411 gold badges42 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rajesh Dixit · Accepted Answer · 2016-12-29 06:39:17Z

1

I'd suggest you using a hidden input. This way you can set its value and then access it in progressSim

Few pointers:

Value from DOM element is string so you will manually have to parse it to number.
You should define af inside progressSim as you are expecting its value to change.
.value || 0 is a safeguard if value is missing or removed. It should not show undefined%.

var ctx = document.getElementById('my_canvas').getContext('2d');
var start = 4.72;
var cw = ctx.canvas.width;
var ch = ctx.canvas.height;
var diff;

function progressSim() {
  var al = +(document.getElementById('myValue').value || 0);
  diff = ((al / 100) * Math.PI * 2 * 10).toFixed(2);
  ctx.clearRect(0, 0, cw, ch);
  ctx.lineWidth = 10;
  ctx.fillStyle = '#09F';
  ctx.strokeStyle = "#09F";
  ctx.textAlign = 'center';
  ctx.fillText(al + '%', cw * .5, ch * .5 + 2, cw);
  ctx.beginPath();
  ctx.arc(35, 35, 30, start, diff / 10 + start, false);
  ctx.stroke();
}
progressSim();


document.getElementById("btnUpdate").addEventListener('click', function() {
  document.getElementById('myValue').value = +(document.getElementById('myValue').value || 0) + 10;
  progressSim();
})

<!-- canvas(id="my_canvas" width="70" height="70") -->
<canvas id="my_canvas" width="70" height="70"></canvas>
<input type="hidden" id="myValue" value="10" />

<button id="btnUpdate">Update value by 10</button>

answered Dec 29, 2016 at 6:39

Rajesh Dixit

25k5 gold badges52 silver badges86 bronze badges

3 Comments

charlietfl Over a year ago

this is a backwards approach in an angular app

Rajesh Dixit Over a year ago

@charlietfl My apologies if this is a bad approach

charlietfl Over a year ago

in angular would pass value from controller to the dom and wrap all this code in a directive

Collectives™ on Stack Overflow

Assign value to inline Javascript using angular JS

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related