視圖中缺少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元素