我得到錯誤，像ReferenceError：matchcolor未定義

Question

我正在生成隨機顏色瓷磚。除了一個以外，所有瓷磚都是相同的顏色並且那個人有淺色。如果用戶找到並單擊該淺色瓦片。然後棋盤生成另一個彩色圖塊。具有相同的邏輯。它工作正常在簡單的HTML，CSS，這裏的JavaScript https://js.do/code/141376但是當我在離子瓷磚板轉換創建，但是當我點擊瓷磚我得到像ReferenceError錯誤：matchcolor沒有定義。

HTML

<ion-view view-title="Dashboard"> 
<ion-content class="padding"> 
    <div ng-controller="helloCtrl"> 
    <div id="color_board"></div> 
    </div> 
</ion-content> 
</ion-view> 

JS

.controller('helloCtrl', [ '$scope',function($scope) { 

$scope.getRandomColor = function() { 
    var letters = 'ABCDEF'; 
    var color = '#'; 
    for (var i = 0; i < 6; i++) { 
     color += letters[Math.floor(Math.random() * 16)]; 
    } 
    return color; 
} 


$scope.ColorLuminance = function(hex, lum) { 
    hex = String(hex).replace(/[^0-9a-f]/gi, ''); 
    if (hex.length < 6) { 
    hex = hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2]; 
    } 
    lum = lum || 0; 
    var rgb = "#", c, i; 
    for (i = 0; i < 3; i++) { 
    c = parseInt(hex.substr(i*2,2), 16); 
    c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16); 
    rgb += ("00"+c).substr(c.length); 
    } 
    return rgb; 
} 

$scope.shuffle = function(array) { 
    var currentIndex = array.length, temporaryValue, randomIndex; 
    while (0 !== currentIndex) { 
    randomIndex = Math.floor(Math.random() * currentIndex); 
    currentIndex -= 1; 
    temporaryValue = array[currentIndex]; 
    array[currentIndex] = array[randomIndex]; 
    array[randomIndex] = temporaryValue; 
    } 
    return array; 
} 

$scope.colorboard = function(){ 

    var colors = $scope.getRandomColor(); 
    console.log('random'); 
    var light = $scope.ColorLuminance(colors,0.3); 
    console.log('light'); 
    console.log(light); 
    var arr = []; 
    for(var i=1; i<=23; i++) { 
    arr.push(colors); 
    } 
    arr.push(light); 
    $scope.shuffle(arr); 
    console.log('shuffle'); 


    var output = ''; 
    for (var i = 0; i < arr.length; i++) { 
    output += '<div id="color_tile_'+i+'" style="background:'+arr[i]+';" ng-Click="matchcolor(\''+arr[i]+'\',\''+light+'\')"></div>'; 
    } 
    document.getElementById('color_board').innerHTML = output; 
} 

$scope.matchcolor = function(val,light){ 
    console.log(light); 
    console.log(val); 
    if(val == light) 
    { 
    colorboard(); 
    } 

} 

$scope.colorboard(); 



}]) 

Answer 1

你的功能是唯一已知的控制器裏面，如果你想要的功能，以在視圖中知道你需要將它們定義爲$ scope的屬性。您在視圖上使用的每個變量和函數都必須是範圍的屬性。

$scope.matchcolor = function(val,light){ 
    console.log(light); 
    console.log(val); 
    if(val == light) 
    { 
    colorboard(); 
    } 

} 

你也需要改變DI風格來推薦一個，因爲當你轉換你的應用程序到離子的所有代碼被微細化以及你的依賴變得未知，你需要改變這樣的：

.controller('helloCtrl', [ '$scope',function($scope) { 
//code here 
}])