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（）”，它也可以工作。我在控制台中也没有出错。

有没有办法以这种方式从数组中引用函数，或者我是否必须创建一个附加函数，它从repeat中获取一个索引参数，然后将索引映射到所需的函数？

谢谢！

Answer 1

将onClick: 'clickMusic()'更改为onClick: clickMusic（这样您就可以存储要在角度模板中调用的函数的引用），然后在ng-click中简单地调用该函数<button ng-click="section.onClick()">

Answer 2

感谢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存在

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

然后，就像mic4ael建议的那样，在HTML中：

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

在angularJS ng事件

2 个答案: