在Angular中更改页面时如何修复yyyy不是功能？

Posted 2023-05-09

【中文标题】在Angular中更改页面时如何修复yyyy不是功能？

【英文标题】：How to fix yyyy is not a function when changing pages in Angular?

【发布时间】：2017-06-01 19:51:08

【问题描述】：

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

为了更好地解释，当我第一次进入网页时，或者如果页面已经打开并刷新它，那么一切正常。但是，如果我转到第 2 页，则会收到 player.markers is not a function 错误。另外，如果我刷新页面，它会再次起作用。

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

这是我的代码：

控制器：

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

【问题讨论】：

请提供plunker示例

@GProst 嗨，我添加了 plunker 链接。您将在控制台中看到导致我出现问题的“不是函数”错误

【参考方案1】：

当您第一次调用videojs('myVideo') 时，它会返回带有方法（函数） 的对象，称为markers。当您调用它时，它会返回 object 属性/方法add、destroy、getMarkers 等。因此，当您每次调用videojs('myVideo') 时，它都会返回该对象。而且你没有方法markers()了。

我在您的控制器中使用简单的 if 语句修复了它（both）：

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

  devPlayer.markers(

  ...

这是我的plunker。