javascript - AngularJS 没有将数组放入范围内？

Question

所以我尝试使用 Angular JS 和 angularSoundManager 模块来创建一个音乐播放器。我可以让歌曲和播放器正常工作，但是当我尝试将主数组更改为每个专辑中包含歌曲数组的专辑时，我不断收到专辑变量未定义的错误。

app.js

angular.module('myApp', ['angularSoundManager']).controller('MainCtrl', ['$scope', function ($scope) {
    $scope.albums = [
        {
            id: 'one',
            title: 'album one',
            songs : [
                {
                    id: 'one',
                    title: 'Rain',
                    artist: 'YaNiggaPaul',
                    url: 'http://www.schillmania.com/projects/soundmanager2/demo/_mp3/rain.mp3'
                },
                {
                    id: 'four',
                    title: 'Angry cow sound?',
                    url: 'http://www.freshly-ground.com/data/audio/binaural/Mak.mp3'
                },
                {
                    id: 'five',
                    title: 'Things that open, close and roll',
                    url: 'http://www.freshly-ground.com/data/audio/binaural/Things%20that%20open,%20close%20and%20roll.mp3'
                }
            ]
        },

        {
            id: 'two',
            title: 'album two',
            songs : [
                {
                    id: 'two',
                    title: 'Walking',
                    url: 'http://www.schillmania.com/projects/soundmanager2/demo/_mp3/walking.mp3'
                },
                {
                    id: 'three',
                    title: 'Barrlping with Carl (featureblend.com)',
                    url: 'http://www.freshly-ground.com/misc/music/carl-3-barlp.mp3'
                }
            ]
        }
    ];
}]);

模块中出现错误的位置。

ngSoundManager.directive('playAll', ['angularPlayer', '$log',
function(angularPlayer, $log) {
    return {
        restrict: "EA",
        scope: {
            albums: '=playAll'
        },
        link: function(scope, element, attrs) {
            element.bind('click', function(event) {
                //first clear the playlist
                angularPlayer.clearPlaylist(function(data) {
                    $log.debug('cleared, ok now add to playlist');
                    //add songs to playlist
                    for(var i = 0; i < scope.albums[attrs.alid]['songs'].length; i++) {
                        angularPlayer.addTrack(scope.albums[attrs.alid]['songs'][i]);
                    }

                    if (attrs.play != 'false') {
                        //play first song
                        angularPlayer.play();
                    }
                });
            });
        }
    };
}]);

更具体

scope.albums[attrs.alid]['songs'].length

错误“无法读取未定义的属性‘0’。

完全没有想法，我的表格结构是否错误？ 我是 Angular 新手，因此非常感谢任何帮助。 <3

编辑::指令调用(我认为..？)。

<li ng-repeat="album in albums">
                <button play-all="songs" my-playlist="playlist" data-alid="{{$index}}">{{album.title}}</button>
                <li ng-repeat="song in album.songs">
                    <button music-player="play" add-song="song">{{ song.title }}</button>
                </li>
            </li>

Answer 1

看起来您正在向指令传递歌曲列表，而不是专辑列表。我认为您想要修改指令以接受单个专辑，并迭代其歌曲。在这种情况下，您需要将指令调用更改为:

<button play-all="album" my-playlist="playlist">{{album.title}}</button>

然后您需要修改指令定义以处理单个专辑，而不是专辑列表。您也不再需要传递相册 ID，因为您已经传递了您关心的实例:

ngSoundManager.directive('playAll', ['angularPlayer', '$log',
function(angularPlayer, $log) {
    return {
        restrict: "EA",
        scope: {
            album: '=playAll'
        },
        link: function(scope, element, attrs) {
            element.bind('click', function(event) {
                //first clear the playlist
                angularPlayer.clearPlaylist(function(data) {
                    $log.debug('cleared, ok now add to playlist');
                    //add songs to playlist
                    for(var i = 0; i < scope.album['songs'].length; i++) {
                        angularPlayer.addTrack(scope.album['songs'][i]);
                    }

                    if (attrs.play != 'false') {
                        //play first song
                        angularPlayer.play();
                    }
                });
            });
        }
    };
}]);

顺便说一句 - 使用 link 函数并不是创建 Angular 指令的最佳方法。 99% 的指令应该只使用 Controller 函数并传入您需要的等效注入(inject)(即 $scope、$element、$attrs)。这样，您的所有指令都遵循类似的约定，因此当您深入 Angular 2+ 的世界时，您会做好更充分的准备