angularjs - 浏览器后退按钮上的视频布局中断

Question

我正在使用 Videogular 来呈现视频页面，但是在从详细信息页面导航回来时，我得到了一个损坏的布局，如下所示：

实际布局应如下所示：

HTML：

<div class="row">

    <div class="col-lg-12">
      <h3 class="page-header">{{videos.length}}</h3>
    </div>

    <div class="col-xs-12 video-list-container">
      <div class="row">
        <div ng-repeat="video in videos track by $index" class="videogular-container video-thumbnail col-xs-4">
          <videogular  class="row" vg-player-ready="vm.onPlayerReady($API, $index)" vg-update-state="vm.onUpdateState($state, $index)">
            <vg-media vg-src="video.sources" vg-tracks="video.tracks" vg-native-controls="true">
            </vg-media>
            <vg-overlay-play></vg-overlay-play>
             <vg-poster vg-url="video.plugins.poster"></vg-poster>
          </videogular>
          <p class="row thumbnail-name" ui-sref="Video({id: video._id})" ng-bind="video.name"></p>
        </div>
      </div>
    </div>

  </div>

控制器：

function LandingCtrl($scope, VideoService, $sce) {
  'ngInject';
  // ViewModel
  const vm = this;

  this.players = [];

  vm.onPlayerReady = function(API, index) {
    vm.players[index] = API;
  };

  vm.onUpdateState = function(state, index) {
    if (state === 'play') {
      // pause other players
      for (var i = 0, l = vm.players.length; i < l; i++) {
        if (i !== index) {
          vm.players[i].pause();
        }
      }
    }
  };

  VideoService.get()
    .then(function(data) {
      var videos = data.data.data.map((video) => {
          return Object.assign(video, {
            url: video.url.replace('videos/', '').replace('.mp4', '')
          })
        }),
        mediaUrl = 'http://res.cloudinary.com/drxrm1mlz/video/upload/v1489491356/';

      $scope.videos = videos.map((video) => {
        return Object.assign(video, {
          sources: [{
            src: $sce.trustAsResourceUrl(mediaUrl + video.url + '.mp4'),
            type: 'video/mp4'
          }],
          theme: {
            url: 'http://www.videogular.com/styles/themes/default/latest/videogular.css'
          }
        });
      });
    }, function(error) {
      console.log('Error occurred' + error);
    });
}

export default {
  name: 'LandingCtrl',
  fn: LandingCtrl
};

有谁知道为什么会发生这种情况？