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

什么，我试图做的，是像财富游戏的车轮，我使用winWheel.js库从这个来源http://dougtesting.net。在我看来，我想从一个按钮调用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点击指令有没有效果，没有输出到控制台就像它的一禁用按钮。我不知道我在这里做错了什么，需要一些帮助，非常感谢，如果需要更多的信息将会比在这里粘贴更高兴。谢谢您的帮助。

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

这里是控制器

.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

经过一番研究终于可以解决它。我改变了我的控制器以下

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 2

使用NG单击您的应用程序没有响应，因为spinWheel.startSpin（）方法不暴露范围的完整代码。

有两种方法来解决这个

1. 揭露旋钮对象的范围，并把该方法startSpin的旋钮对象。

控制器

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

在您的上述共享代码你的类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 
} 

}); 

然后使用它的功能对你的看法，你正在使用目前的方式

Answer 4

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

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

= “spinWheel.startSpin（）”

ng-click="spinWheel.startSpin" 

和代替的onClick = “spinwheel.resetWheel（）;”

ng-click="spinWheel.resetWheel" 

它会工作。