Присвоить значение встроенному Javascript, используя угловой JS

Question

Я хотел загрузить холст, чтобы рассчитать счетчик профиля для пользователя. Я вычислил значение и присвоил его переменной углового диапазона. Мой код холста находится в встроенном javascript. Как я могу присвоить значение переменной в встроенном javascript?

вот код на холсте и мой файл нефрита:

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" />

, а также есть лучший подход, чтобы сделать это?

вот рабочий Plunker! https://plnkr.co/edit/5qKZ9fGY1miinouWC7Iy

Answer 1

Удалить встроенный код и добавить его в app.js и Вы можете найти изменения $scope.canvas вместо 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(); 
}); 

Answer 2

Я предлагаю вам использовать вход hidden. Таким образом, вы можете установить его значение, а затем получить доступ к нему в progressSim

Несколько указателей:

• значение из DOM элемента строки, так что вы будете вручную должны разобрать его на номер.
• Вы должны определить af внутри progressSim, так как вы ожидаете изменения его значения.
• .value || 0 является защитой, если значение отсутствует или удалено. Он не должен показывать 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>