HTML Angular 中的片段在视图中部分缺失

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

HTML Angular 中的片段在视图中部分缺失

HTML snippet in Angular partial missing in view

javascript

partial-views

partials

partial

angularjs