ng-click 的奇怪错误

Question

所以我用 ng-repeat 创建了一张专辑中所有歌曲的列表（参考我之前问的问题）

所以我现在要做的是当用户单击列表中的项目时，它会播放引用的曲目。这是我的应用程序：

    enitoniApp.controller('musicItems', ['$scope', function ($scope) {
    $scope.ngplaySong = function (ref, name) {
        playSong(ref, name)
    }
    $scope.albums = [
        {
            name: 'Over The Mountains',
            price: 0,
            tracks: [
                {
                    name: 'Over The Mountains',
                    ref: 'otm',
                    released: 0,
                },
                {
                    name: '!C3',
                    ref: 'ice',
                    released: 0,
                },
                {
                    name: 'Dark Clouds',
                    ref: 'clouds',
                    released: 0
                },
                {
                    name: 'Fog',
                    ref: 'fog',
                    released: 0
                }
        ]
        },
        {
            name: 'test-album',
            price: 5000,
            tracks: [
                {
                    name: 'test',
                    ref: 'null'
                },

            ]
        }
    ]
}]);

如您所见，我正在尝试使用 ng-click 调用常规函数。这个常规函数 (playSong()) 在我的播放器代码中，它根据参考 ID 播放曲目。

来自 player.js 的片段：

/** Play single song **/

function playSong(ref, name) {
    showPlayer();
    clearPlaylist()
    playlistPosition = 0;
    addToPlaylist(ref, name, 'play')
}

所以我的 html:

        <li ng-repeat="album in albums">
            <div class="info">
                <p>{{album.name}}</p>
                <p>{{album.price | currency}}</p>
            </div>
            <ul>
                <li ng-animate="grid-fade" ng-repeat="track in album.tracks">
                    <div class="grid-item" ng-click="ngplaySong('{{track.ref}}','{{track.name}}')">
                        <div class="cover">
                            <img ng-src="/img/covers/art_{{track.ref}}.png" alt="">
                        </div>
                        <div class="info">
                            <p>{{track.name}}</p>
                            <p>{{track.released}}</p>
                        </div>
                    </div>
                </li>
            </ul>
        </li>

奇怪的是，即使渲染正确：

即使参数正确，也会将此输出到控制台：

为什么调用函数时没有绑定数据，我是不是遗漏了什么？

Answer 1

我认为您 ng-click 内不需要那些牙套。试试这个：

<div class="grid-item" ng-click="ngplaySong(track.ref, track.name)">

问题是你将一个表达式传递给 ng-click，然后由 Angular 解析，它足够聪明，可以识别当前范围内的变量。您可以在此处阅读有关 Angular 表达式的更多信息：https://docs.angularjs.org/guide/expression

事实上，Angular ng-click 文档中有一个非常简单易懂的示例，其中包括访问 ng-click 表达式中的局部变量：https://docs.angularjs.org/api/ng/directive/ngClick

ng-click 的奇怪错误

Weird bug with ng-click

javascript

angularjs

angularjs-ng-click