在angularJS ng事件中通過表達式調用函數

我有一個問題，我想將使用ng-repeat創建的按鈕映射到控制器中的某些函數。我定義一個字符串函數名這樣的：在angularJS ng事件中通過表達式調用函數

$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（）」，它也可以工作。我也沒有在控制檯中發現錯誤。

有沒有辦法以這種方式引用數組中的函數，還是必須創建一個額外的函數，該函數從repeat中獲取索引參數，然後將索引映射到期望的函數？

謝謝！

來源

2016-09-19 Simon Eliasson

變化onClick: 'clickMusic()'到onClick: clickMusic（這樣你存儲到要角模板中調用函數的引用），然後在NG單擊只是調用funtion <button ng-click="section.onClick()">

來源

2016-09-19 12:02:12 mic4ael

儘管這在我的情況下並不完全準確，因爲我的函數被定義爲$ scope.clickMusic（）。我已經發布了基於你的自己的答案，但如果你編輯你的答案以適應這個特定的情況，我會將其標記爲正確的答案。非常感謝！ –

由於mic4ael的建議。我設法弄清楚了。

控制器

：

$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()">

來源

2016-09-19 12:15:26

在angularJS ng事件中通過表達式調用函數

回答

相關問題