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" 

它會工作。