ReferenceErrorのようなエラーが発生しました：matchcolorが定義されていません

Question

ランダムな色のタイルを生成しています。すべてのタイルは1つを除いて同じ色です。それは明るい色をしています。ユーザーがその明るい色のタイルを見つけてクリックするとボードは別の色のタイルを生成します。同じ論理で単純な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.propertiesの変数と関数は、スコープのプロパティでなければなりません。あなたはこのようにそれを変更する必要があるあなたが縮小されますすべてのコードをイオン性にアプリケーションを変換し、あなたの依存関係が不明になったときので

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

} 

はまた、推奨1にDIのスタイルを変更する必要があります。

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