ng-click 指令不调用控制器功能

Question

我正在开发一个离子应用程序，尝试使用 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();

}]);

Answer 1

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

有两种方法可以解决这个问题

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

控制器

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

1. 在 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>

Answer 2

只需添加以下代码而不是 $scope.spinWheel = startSpin();

$scope.spinWheel ={
                       startSpin:startSpin,
                       resetWheel:resetWheel
                };

而不是 onClick="spinWheel.startSpin()"

ng-click="spinWheel.startSpin"

而不是 onClick="spinwheel.resetWheel();"

ng-click="spinWheel.resetWheel"

它会起作用的。

Answer 3

经过一番研究终于能够修复它。我在控制器中更改了以下内容

function startSpin()
{
    //...
}

和

function resetWheel()
{
    //
}

到

$scope.startSpin = function()
{
    //
}

和

$scope.resetWheel = function()
{
    //
}

然后在我看来是能够访问这两个功能所以

<button ng-click="startSpin()">Spin the Wheel</button>

为了重置

<a href="javascript:void(0);" ng-click="resetWheel()">Reset</a>

Answer 4

在您上面的共享代码中，您的类 spinWheel 不在范围内，请执行以下操作

 $scope.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
}

});

然后按照您当前使用的方式在您的视图上使用它的功能