angleJS ngイベントの式による関数呼び出し

Question

ng-repeatで作成されたボタンをコントローラの特定の関数にマップしたいという問題があります。

$scope.sections = [ 
{ 
    title: 'Music', 
    desc: 'Some examples of electronic music I have produced using Fl Studio.', 
    color: '#76a86f', 
    icon: 'img/icon/music.png', 
    onClick: 'clickMusic()' 
}]; 

機能は次のように定義されています：

$scope.clickMusic = function() { 
    hideAll(); 
    document.getElementById("musicContent").classList.remove("hide"); 
    document.getElementById("musicContent").classList.add("show"); 
}; 

そして、このようなHTMLボタンに機能をマップしよう：

<div ng-repeat="section in sections"> 
    <div class="sectionThumbnail""> 
     <button ng-click="section.onClick"> 
      <img ng-src="{{ section.icon }}" id="sectionnail_{{$index}}" ng-mouseover="sectionhoverIn($index)" ng-mouseleave="sectionhoverOut($index)"> 
     </button> 
     <div class="sectionthumbnailInfo"> 
      <p class="sectiontitle">{{ section.title }}</p> 
      {{ section.desc }} 
     </div> 
    </div> 
</div> 

私はこのような関数名の文字列を定義しています

ただし、ボタンをクリックしても何も起こりません。私はclickMusic（）関数が一度実行されると意図したとおりに動作することを知っています。なぜなら私はウェブページ上の別のボタンに対して同じ機能を使用するからです。 ng-click = "clickMusic（）"のように、ng-clickのclickMusic（）関数を直接参照すると、それも機能します。私はコンソールにもエラーは表示されません。

このように配列から関数を参照する方法はありますか？または、繰り返しからインデックス引数をとり、インデックスを目的の関数にマップする追加の関数を作成する必要がありますか？

ありがとうございます！ onClick: clickMusicへ

Answer 1

変更onClick: 'clickMusic()'（この方法、あなたは、角度テンプレート内で呼び出したい関数への参照を格納し）、その後、NG-クリックでは、単にmic4aelの提案に<button ng-click="section.onClick()">

Answer 2

おかげでその目的球を呼び出します。私はそれを理解することができた。コントローラで

：原因私の機能に

$scope.sections = [ 
{ 
    title: 'Music', 
    desc: 'Some examples of electronic music I have produced using Fl Studio.', 
    color: '#76a86f', 
    icon: 'img/icon/music.png', 
    onClick: $scope.clickMusic 
}]; 

$の余地があるように定義されている：

$scope.clickMusic = function() { 
    hideAll(); 
    document.getElementById("musicContent").classList.remove("hide"); 
    document.getElementById("musicContent").classList.add("show"); 
}; 

そして、mic4aelが提案同じように、HTMLで：

<button ng-click="section.onClick()">