I'm currently working on an Ionic app and trying to use ng-click to call a function from my controller. Below is the function I want to call:
function startSpin() {
if ($scope.wheelSpinning == false) {
spinWheel.animation.spins = 9;
spinWheel.startAnimation();
$scope.wheelSpinning = true;
}
}
function resetWheel() {
spinWheel.stopAnimation(false);
spinWheel.rotationAngle = 0;
spinWheel.draw();
$scope.wheelSpinning = false;
$scope.$apply();
}
The aim here is to create something similar to a wheel of fortune game using the winWheel.js library sourced from . In my view, I want to call the startSpin() and resetWheel() functions from buttons. Here's the corresponding code:
<canvas id="canvas" width="300px" height="315px" style="margin: 25px">
Canvas not supported
</canvas>
<button onClick="spinWheel.startSpin()">Spin the Wheel</button>
<a href="javascript:void(0);" onClick="spinwheel.resetWheel();">Reset</a>
However, when clicking the spin button, it returns an error in the console:
Uncaught ReferenceError: spinWheel is not defined
Furthermore, when using the ng-click directive, no output is generated as if the button is disabled. I seem to be missing something here and would appreciate any help or guidance. If more information is needed, feel free to ask. Thank you for your assistance.
Note that this is just a portion of the code in my controller. The complete code can be found below:
.controller('PlayCtrl', ["$scope", "$ionicPopup", function($scope, $ionicPopup) {
var spinWheel = new Winwheel({
'numSegments' : 6,
'outerRadius' : 138,
'lineWidth' : 2,
'segments' :
[
{'fillStyle' : '#eae56f', 'text' : 'Segment 1'},
{'fillStyle' : '#89f26e', 'text' : 'Segment 2'},
{'fillStyle' : '#7de6ef', 'text' : 'Segment 3'},
{'fillStyle' : '#e7706f', 'text' : 'Segment 4'},
{'fillStyle' : '#0D56A6', 'text' : 'Segment 5'},
{'fillStyle' : '#29c932', 'text' : 'Segment 6'}
],
// Animation specifications
{
'type' : 'spinToStop',
'duration' : 5,
'spins' : 10,
}
});
$scope.wheelSpinning = false;
//Click handler for spin button.
function startSpin()
{
if ($scope.wheelSpinning == false)
{
spinWheel.animation.spins = 9;
spinWheel.startAnimation();
$scope.wheelSpinning = true;
}
}
// Function for the reset button.
function resetWheel()
{
spinWheel.stopAnimation(false);
spinWheel.rotationAngle = 0;
spinWheel.draw();
$scope.wheelSpinning = false;
$scope.$apply();
}
// Callback function once spin animation finishes
alertPrize = function()
{
var winningSegment = spinWheel.getIndicatedSegment();
$ionicPopup.alert({
title: 'Success',
content: "You have won " + winningSegment.text + "!"
});
}
$scope.spinWheel = startSpin();
}]);