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（）方法未暴露给范围。

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

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

Answer 2

在您的上述共享代码中，您的旋转旋转器类不在范围内，请执行以下操作

TASK [namenode : Check if Namenode is running] *********************************
fatal: [server1.hdp.vagrant.data.uc]: FAILED! => {"changed": false, "cmd": "jps | grep \" NameNode\" | grep -v grep", "delta": "0:00:00.192755", "end": "2016-11-09 10:59:10.360552", "failed": true, "rc": 1, "start": "2016-11-09 10:59:10.167797", "stderr": "", "stdout": "", "stdout_lines": [], "warnings": []}
...ignoring

TASK [namenode : Report status of Namenode] ************************************
fatal: [server1.hdp.vagrant.data.uc]: FAILED! => {"changed": false, "failed": true, "msg": "Service NameNode is not running.\nReturn code from `jps | grep \" NameNode\" | grep -v grep`:\n1  \n"}

NO MORE HOSTS LEFT *************************************************************

RUNNING HANDLER [metastore : restart postgresql] *******************************
    to retry, use: --limit @/Users/krisdigitx/myLab/hdp/provisioning/site.retry

PLAY RECAP *********************************************************************
server1.hdp.vagrant.data.uc : ok=86   changed=32   unreachable=0    failed=1

Ansible failed to complete successfully. Any error output should be
visible above. Please fix these errors and try again.

然后以您当前使用的方式在视图中使用其功能

Answer 3

只需添加以下代码，而不是$ scope.spinWheel = startSpin（）;

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

而不是onClick =“spinWheel.startSpin（）”

ng-click="spinWheel.startSpin"

而不是onClick =“spinwheel.resetWheel（）;”

ng-click="spinWheel.resetWheel"

它会起作用。

Answer 4

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

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>

ng-click指令不调用控制器函数

4 个答案: