HTML snippet in Angular partial missing in view

Question

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.

did this make it? <div class="current-time"> ? just the values in the div missing ? or the entire div is missing? if the entire div is missing you have to post what parents / surrounding divs are — Scott Selby
– Scott Selby, Commented May 13, 2015 at 1:37
Thanks Scott. The entire div is missing. I'll update it with the surrounding parents. — Tyler Reitz
– Tyler Reitz, Commented May 13, 2015 at 1:39
try turning off javascript and see if those divs get rendered. I have never heard of anything like that , unless there is some script setting the html of the parents . and that doesn't look like the case — Scott Selby
– Scott Selby, Commented May 13, 2015 at 2:26
Not enough known to really know why ... without a lot of guessing. How is partial referenced to be included? — charlietfl
– charlietfl, Commented May 13, 2015 at 2:44

kachhalimbu · Accepted Answer · 2015-05-13 03:58:05Z

1

You haven't closed your slider element properly

answered May 13, 2015 at 3:58

kachhalimbu

2,20017 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Tyler Reitz Over a year ago

Thank you kachhalimbu. A little embarrassed I didn't catch that. I'm only just starting out with Angular (front end, really) and couldn't see the forest for the trees, so to speak.

Matt Born Over a year ago

For the future, you could try the tool this guy made or this library I like to use in Sublime. There’s always the HTML validator as well.

kachhalimbu Over a year ago

Good point @Matt I just pasted his snippet in WebStrom and that's the first thing I noticed because the built-in HTML validators flagged it as a error

Collectives™ on Stack Overflow

HTML snippet in Angular partial missing in view

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related