javascript - ng-click指令未调用 Controller 功能

我正在开发离子应用程序，试图使用ng-click从控制器中调用函数。这是我要调用的函数。

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();
}

我在这里尝试做的事情就像一个命运之轮，并且我正在使用来自源http://dougtesting.net的winWheel.js库。在我看来，我想从一个按钮调用startSpin（）和resetWheel（）函数。这是我的代码。

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

这样，当我单击旋转按钮时，它将在控制台上返回

Uncaught ReferenceError: spinWheel is not defined

当我使用ng-click指令时，它没有任何作用，几乎没有任何输出到控制台，就像它的禁用按钮一样。我不知道我在这里做错了什么，将需要一些帮助，非常感谢，如果需要更多信息，将非常高兴在此处粘贴。谢谢您的帮助。

请注意，这只是我控制器中代码的一部分。

这是控制器的完整代码

.controller('PlayCtrl', ["$scope", "$ionicPopup", function($scope, $ionicPopup) {
 // Create new wheel object specifying the parameters at creation time.
 var spinWheel = new Winwheel({
'numSegments' : 6,      // Specify number of segments.
'outerRadius' : 138,    // Set outer radius so wheel fits inside the background.
'lineWidth'   : 2,
'segments'    :         // Define segments including colour and text.
[
  {'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'    :        // Specify the animation to use.
{
  'type'       : 'spinToStop',
  'duration'   : 5,     // Duration in seconds.
  'spins'      : 10,    // Number of complete spins.
  // 'callbackFinished'  : 'alertPrize()'    // Alert to show prize won
}

});

$scope.wheelSpinning = false;


//Click handler for spin button.
function startSpin()
{
// Ensure that spinning can't be clicked again while already running.
if ($scope.wheelSpinning == false)
{
  spinWheel.animation.spins = 9;

  // Begin the spin animation by calling startAnimation on the wheel object.
  spinWheel.startAnimation();

  // Set to true so that power can't be changed and spin button re-enabled during
  // the current animation. The user will have to reset before spinning again.
  $scope.wheelSpinning = true;
}
}

// Function for the reset button.
function resetWheel()
{
spinWheel.stopAnimation(false);   // Stop the animation, false as parameter so does not call callback function.
spinWheel.rotationAngle = 0;      // Reset to false to power buttons and spin can be clicked again.
spinWheel.draw();                 // Call draw to render changes to the wheel.

$scope.wheelSpinning = false;     // Reset to false so spin can be clicked again.
$scope.$apply();
}

// Called when the spin animation has finished by the callback feature of the wheel
alertPrize = function()
{
// Get the segment indicated by the pointer on the wheel background which is at 0 degrees.
var winningSegment = spinWheel.getIndicatedSegment();

// Alert of selected segment text.
$ionicPopup.alert({
  title: 'Success',
  content: "You have won " + winningSegment.text + "!"
});

}

$scope.spinWheel = startSpin();

}]);

最佳答案

在使用ng-click时，您的应用程序没有响应，因为spinWheel.startSpin（）方法未暴露给作用域。

有两种解决方法

将spinWheel对象公开到您的作用域，并将方法startSpin放入spinWheel对象中。

控制者

$scope.spinWheel = { var startSpin = function() { //Code Here } var stopSpin = function() { //Code Here }}

将控制器显示为HTML中的旋转轮

<div ng-controller = "PlayCtrl as spinWheel"> <button onClick="spinWheel.startSpin()">Spin the Wheel</button> <a href="javascript:void(0);" onClick="spinwheel.resetWheel();">Reset</a></div>

关于javascript - ng-click指令未调用 Controller 功能，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40505237/

SpinWheel

javascript - ng-click指令未调用 Controller 功能