AngularJS 没有将数组放入作用域?
AngularJS not putting an array in scope?
所以我尝试使用 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'。
完全没有想法,我只是 table 的结构错了吗?
我是 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>
您似乎将歌曲列表而不是专辑列表传递给指令。我在想你想修改你的指令以接受一张专辑,并迭代它的歌曲。在这种情况下,您需要将指令调用更改为:
<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% 的指令应该只使用控制器函数并传入你需要的等效注入($scope、$element、$attrs)。这样,您的所有指令都遵循类似的约定,因此当您进入 Angular 2+
的世界时,您会做好更充分的准备
所以我尝试使用 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'。
完全没有想法,我只是 table 的结构错了吗? 我是 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>
您似乎将歌曲列表而不是专辑列表传递给指令。我在想你想修改你的指令以接受一张专辑,并迭代它的歌曲。在这种情况下,您需要将指令调用更改为:
<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% 的指令应该只使用控制器函数并传入你需要的等效注入($scope、$element、$attrs)。这样,您的所有指令都遵循类似的约定,因此当您进入 Angular 2+