视图中缺少Angular中的HTML代码段

Question

我在Angular部分中有一个HTML块，由于某种原因它没有进入视图。 部分中的每隔HTML行（包括其他具有数据绑定和对我的服务及其方法的引用的行）都加入了其中。很难找到以前回答过此特定问题的问题...

这是缺少的块：

<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>

定义范围变量的控制器：

Jams.controller('PlayerBar.controller', ['$scope', 'SongPlayer', function($scope, SongPlayer){
  $scope.songPlayer = SongPlayer;

  SongPlayer.onTimeUpdate(function(event, time) {
    $scope.$apply(function() {
      $scope.playTime = time;
    });
  });
}]);

定义我的方法的服务：

Jams.service('SongPlayer', ['$rootScope', function($rootScope) {
  var currentSoundFile = null;
  return {
    onTimeUpdate: function(callback) {
      return $rootScope.$on('sound:timeupdate', callback);
    },
  };
}]);

而我的时间码过滤器：

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;
  }
});

好奇为什么只有这些行被遗漏而其他人才插入。

Answer 1

您尚未正确关闭slider元素