I have a block of HTML in an Angular partial that's not making it into the view for some reason. Every other line of HTML in the partial (including other lines with data-binding and references to my service and its methods) are making it in. Had a hard time locating previously asked questions that answer this specific issue...
Here's the missing block:
<div ng-controller="PlayerBar.controller" class="player-bar">
<div class="container">
<div class="currently-playing player-bar-control-group">
<h2 class="song-name"> {{ songPlayer.currentSong.name }} </h2>
<div class="seek-control">
<slider value="{{playTime}}" max="{{songPlayer.currentSong.length}}" on-change="songPlayer.seek(value)"><slider>
<div class="current-time">{{ playTime | timecode }}</div>
<div class="total-time">{{ songPlayer.currentSong.length | timecode }} </div>
</div>
<h3 class="artist-name">{{ songPlayer.currentAlbum.artist }}</h3>
</div>
</div>
My controller in which my scope variable is defined:
Jams.controller('PlayerBar.controller', ['$scope', 'SongPlayer', function($scope, SongPlayer){
$scope.songPlayer = SongPlayer;
SongPlayer.onTimeUpdate(function(event, time) {
$scope.$apply(function() {
$scope.playTime = time;
});
});
}]);
My service where my method is defined:
Jams.service('SongPlayer', ['$rootScope', function($rootScope) {
var currentSoundFile = null;
return {
onTimeUpdate: function(callback) {
return $rootScope.$on('sound:timeupdate', callback);
},
};
}]);
And my timecode filter:
Jams.filter('timecode', function() {
return function(seconds) {
seconds = Number.parseFloat(seconds)
if (Number.isNaN(seconds)) {
return '-:--';
}
var wholeSeconds = Math.floor(seconds)
var minutes = Math.floor(wholeSeconds / 60);
remainingSeconds = wholeSeconds % 60;
var output = minutes + ':';
if (remainingSeconds < 10) {
output += '0';
}
output += remainingSeconds;
return output;
}
});
Curious as to why only these lines are left out while others make it in.
