Как исправить yyyy не является функцией при смене страниц в Angular?

Question

У меня есть приложение Angular, которое использует плагин Videojs для добавления маркеров на видео. Все работает, за исключением случаев перехода с одной страницы на другую, я получаю сообщение об ошибке: player.markers не является функцией. Он работает снова, только если обновить страницу.

Чтобы лучше объяснить, когда я впервые вхожу на веб-страницу, или если страница уже открыта и обновлена, то все работает. Однако, если я перейду на страницу 2, я получу player.markers не является функцией Ошибка. Кроме того, если я обновляю страницу, она снова работает.

Я знаю, что это должно быть легко исправить, где-то плагин не загружается при переходе с одной страницы на другую, но я не могу найти решение.

Вот мой код:

Контроллеры:

// ******** CONTROLLER 1 ********* 
app.controller('topicCtrl', function($scope, $routeParams, $http) { 
    //bookmarks list. here is also data about markers on video progress bar 
    $scope.markers = [ 
    { 
     time: 9.5, 
     text: "Compare Balance", 
     overlayText: 'overlay' 
    }, 
    { 
     time: 106, 
     text: "xRay Rules", 
     overlayText: 'overlay' 
    }, 
    { 
     time: 43.6, 
     text: "Rule filter0-text", 
     overlayText: 'overlay' 
    }, 
    { 
     time: 78, 
     text: "Using help-id class", 
     overlayText: 'overlay' 
    }]; 

    //video player object 
    var player = videojs('myVideo'); 

    //load the marker plugin 
    //!!! HERE IS WHERE I GET THE ERROR. player.markers not a function 
    player.markers({ 
     markers: $scope.markers, 
     markerStyle: { 
      'width': '17px', 
      'border-radius': '30%', 
      'background-color': 'green' 
     }, 
     markerTip:{ 
      display: true, 
      text: function(marker) { 
       return marker.text; 
      }, 
      time: function(marker) { 
       return marker.time; 
      } 
     }, 
     onMarkerClick: function(marker) {} 
    }); 
}); 

// ******** CONTROLLER 2 ********* 
app.controller('devCtrl', function ($scope, $routeParams, $http, $window) { 

    //bookmarks list. here is also data about markers on video progress bar 
    $scope.markers = [ 
    { 
     time: 9.5, 
     text: "Compare Balance", 
     overlayText: 'overlay' 
    }, 
    { 
     time: 106, 
     text: "xRay Rules", 
     overlayText: 'overlay' 
    }, 
    { 
     time: 43.6, 
     text: "Rule filter0-text", 
     overlayText: 'overlay' 
    }, 
    { 
     time: 78, 
     text: "Using help-id class", 
     overlayText: 'overlay' 
    }]; 

    //video player object 
    var devPlayer = videojs('myVideo'); 

    //load the marker plugin 
    devPlayer.markers({ 
     markers: [], 
     markerStyle: { 
      'width': '17px', 
      'border-radius': '30%', 
      'background-color': 'green' 
     }, 
     markerTip:{ 
      display: true, 
      text: function(marker) { 
       return marker.text; 
      }, 
      time: function(marker) { 
       return marker.time; 
      } 
     }, 
     onMarkerClick: function(marker) {} 
    }); 
}) 

HTML

<!- ***** page 1 ***** --> 
    <div id="page"> 
     <h2>Page 1 {{title}}</h2> 

     <div id="videoContainer"> 
      <video id = "myVideo" width="600" class="video-js vjs-default-skin" controls> 
       <source src="videos/xray-stable-ids.mp4" type="video/mp4" /> 
      </video> 

      <bookmark-list></bookmark-list> 
     </div> 
    </div> 

<!- ***** page 2 ***** --> 
    <div id="page"> 
     <h2>Page 2 {{title}}</h2> 

     <div id="videoContainer"> 
      <video id = "myVideo" width="600" class="video-js vjs-default-skin" controls> 
       <source src="videos/xray-stable-ids.mp4" type="video/mp4" /> 
      </video> 

      <bookmark-list></bookmark-list> 
     </div> 
    </div> 

Я также попытался наблюдать за изменением маршрута и попытались загрузить полную страницу, но не повезло.

ЗДЕСЬ мой плукер. Обратите внимание, что при переходе между страницами вы не получаете функции player.markers. Мне нужно понять, почему я получаю это при смене страницы. https://plnkr.co/edit/OfbJEpgZiGdbXwF3kNE0?p=preview

Answer 1

При первом вызове videojs('myVideo') он возвращает объект с метода (функции) называется markers. Когда вы его назовете, он возвращает объект со свойствами/методами add, destroy, getMarkers и т. Д. Поэтому, когда вы вызываете videojs('myVideo') каждый последующий раз, он возвращает этот объект. И у вас нет метода markers().

Я установил его с простым if заявление в контроллерах (и):

if (typeof devPlayer.markers === 'function') { 

    devPlayer.markers({ 

    ... 

} 

Вот мой plunker.