I'm coding a site for my friend's band that uses Angular as well as the SoundCloud API and I have not been able to get past this one problem.
In my first controller I was able to update the view with expressions populated by the soundcloud users JSON with a simple $http.get.
In my second controller, I wanted to grab each track + the track stats and put them in their own html paragraph with ng-repeat. However, when I do this, ng-repeat loops the appropriate amount of times (45X) yet only 3 of the created elements are populated with the track info. There are about 40 blank elements then the first three songs displayed as they should be followed by another blank section.
Here is my code:
(function(){
angular.module("ninety", [])
.controller("bandInfo", ['$http', function($http){
var ninetystuff = this;
ninetystuff.data = [];
$http.get('https://api.soundcloud.com/users/23749941.json?client_id=b4809581f93dc4d3308994300923b660').success(function(data){
ninetystuff.data = data;
});
}])
.controller("music", ['$http', '$scope', function($http, $scope){
var ninetyshit = this;
ninetyshit.data = [];
$scope.show = false;
SC.initialize({
client_id: "b4809581f93dc4d3308994300923b660"
});
SC.get('/users/23749941/tracks').then(function(tracks){
ninetyshit.data = tracks;
$scope.show = true;
});
$scope.playTrack = function(track) {
SC.oEmbed(track, {
auto_play: true,
maxheight: 200
}).then(function(embed){
$("#player").empty();
$("#player").append(embed.html);
});
};
}])
.directive('scrollToPlayer', function() {
return {
restrict: 'A',
link: function(scope, $elm, attr) {
$elm.on('click', function() {
$('html,body, #bg').animate({scrollTop: 400 }, 1000);
});
}
};
});
})();I've tried creating a service to handle the promise returned from the 'GET' request but I had the same result.