Javascript 如何修复yyyy在更改页面时不是一个函数？

我有一个Angular应用程序，它使用Videojs插件在视频上添加标记。一切正常，除了从一个页面转到另一个页面时，我得到一个错误：player.markers不是一个函数。只有在刷新页面时，它才能再次正常工作

为了更好地解释，当我第一次进入网页时，或者如果网页已经打开并刷新，那么一切都正常。但是，如果我转到第2页，我会得到播放器。标记不是函数错误。另外，如果我刷新页面，它会再次工作

我知道它应该很容易修复，当从一个页面转到另一个页面时插件没有加载，但我找不到解决方案

这是我的密码：

控制器：

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

第1页{{title}
第2页{{title}

我还试图观察路线的变化，并试图加载整个页面，但没有运气

---

这是我的扑克牌。请注意，当您在页面之间进行更改时，将得到player.marks，而不是函数。我需要理解为什么我在换页时会这样

当您第一次调用

videojs（'myVideo'）

时，它返回带有方法（函数）调用的

标记的对象。当您调用它时，它会返回带有属性/方法的object，
add
，
destroy
，
getMarkers
等。因此，当您以后每次调用
videojs（'myVideo'）
时，它都会返回该对象。而且您不再有方法
标记（）

我在控制器中用简单的
if
语句（两者都）修复了它：

这是我的。
当您第一次调用
videojs（“myVideo”）时，
它返回带有方法（函数）调用
标记的对象。当您调用它时，它会返回带有属性/方法的object，
add
，
destroy
，
getMarkers
等。因此，当您以后每次调用
videojs（'myVideo'）
时，它都会返回该对象。而且您不再有方法
标记（）

我在控制器中用简单的
if
语句（两者都）修复了它：

这是我的名片。
请提供example@GProst嗨，我添加了plunker链接。您将在控制台中看到，导致我出现问题的“不是函数”错误请提供example@GProst嗨，我添加了plunker链接。您将在控制台中看到导致我出现问题的“不是函数”错误
<!- ***** 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>

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

  devPlayer.markers({

  ...

}