Javascript AngularJS没有将数组放入范围?
所以我尝试使用AngularJS和angularSoundManager模块来创建一个音乐播放器。我可以让歌曲和播放机正常工作,但当我尝试将主数组更改为每个相册中包含歌曲数组的相册时,我不断收到一个错误,即相册变量未定义 app.jsJavascript AngularJS没有将数组放入范围?,javascript,angularjs,arrays,angularjs-directive,angularjs-scope,Javascript,Angularjs,Arrays,Angularjs Directive,Angularjs Scope,所以我尝试使用AngularJS和angularSoundManager模块来创建一个音乐播放器。我可以让歌曲和播放机正常工作,但当我尝试将主数组更改为每个相册中包含歌曲数组的相册时,我不断收到一个错误,即相册变量未定义 app.js angular.module('myApp', ['angularSoundManager']).controller('MainCtrl', ['$scope', function ($scope) { $scope.albums = [
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();
}
});
});
}
};
}]);
错误为“无法读取未定义的属性“0”
所有的想法,我只是结构我的表错了吗?
我是Angular的新手,因此非常感谢您提供的任何帮助。看起来您是在向指令传递歌曲列表,而不是专辑列表。我认为您希望修改指令以接受单个专辑,并迭代其歌曲。在这种情况下,您需要将指令调用更改为:
<button play-all="album" my-playlist="playlist">{{album.title}}</button>
{{album.title}
然后,您将需要修改指令定义,以处理单个相册,而不是相册列表。您也不再需要传递相册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();
}
});
});
}
};
}]);
ngSoundManager.directive('playAll',['angularPlayer','$log',',
函数(angularPlayer,$log){
返回{
限制:“EA”,
范围:{
专辑:'=playAll'
},
链接:函数(范围、元素、属性){
元素绑定('click',函数(事件){
//首先清除播放列表
angularPlayer.clearPlaylist(功能(数据){
$log.debug('cleared,ok now add to playlist');
//将歌曲添加到播放列表
for(var i=0;i
作为旁注-使用
link
函数并不是创建角度指令的最佳方式。99%的指令应该只使用控制器函数,并传入所需的等效注射剂(即$scope、$element、$attrs)。这样,您的所有指令都遵循类似的约定,因此当您深入Angular 2+的世界时,您会更加准备就绪。看起来您是在向指令传递歌曲列表,而不是专辑列表。我认为您希望修改您的指令以接受单个专辑,并对其歌曲进行迭代。在这种情况下如果您希望将指令调用更改为:
<button play-all="album" my-playlist="playlist">{{album.title}}</button>
{{album.title}
然后,您将需要修改指令定义,以处理单个相册,而不是相册列表。您也不再需要传递相册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();
}
});
});
}
};
}]);
ngSoundManager.directive('playAll',['angularPlayer','$log',',
函数(angularPlayer,$log){
返回{
限制:“EA”,
范围:{
专辑:'=playAll'
},
链接:函数(范围、元素、属性){
元素绑定('click',函数(事件){
//首先清除播放列表
angularPlayer.clearPlaylist(功能(数据){
$log.debug('cleared,ok now add to playlist');
//将歌曲添加到播放列表
for(var i=0;i
作为旁注-使用
link
函数并不是创建角度指令的最佳方式。99%的指令应该只使用控制器函数,并传入所需的等效注射剂(即$scope、$element、$attrs)。这样,你所有的指令都遵循类似的惯例,因此当你深入Angular 2+的世界时,你会更有准备。你如何称呼你的指令?@PeterLaBanca edited。我相信这就是想要的,我可能是错的。你如何称呼你的指令?@PeterLaBanca edited。我相信这就是想要的,我可能是w荣。我爱你,我肯定需要用Angular来变得更加水嫩。谢谢你的提示!我爱你,我肯定需要用Angular来变得更加水嫩。谢谢你的提示!