在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事件中通过表达式调用函数

回答

相关问题