javascript - AngularJS 库仅在我刷新页面后工作，如果我更改状态它会停止工作

Question

我正在使用图书馆 video.js .我使用了网站上的示例代码:

<video id="my-video" class="video-js vjs-default-skin" controls 
preload="auto" width="1000" height="600" data-setup='{ "playbackRates": [1, 
1.5, 2] }'>
         <source src="file\undefined\1501667652598.mp4" type="video/mp4">
</video>

并添加了脚本/css:

<link href="http://vjs.zencdn.net/6.2.4/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/6.2.4/video.js"></script>

当我直接刷新页面时，它工作正常。但如果我改变状态，它默认为普通视频播放器。我可能面临什么问题？

状态定义看起来像这样:

angular.module("pamm").config(function ($stateProvider) {
    $stateProvider
        .state("user.topic", {
            url: "/topic",
            views: {
                "content@user": {
                    templateUrl: "feature/user/topic/topic-list.html"
                }
            },
            params: {
                section: null,
                type: null
            }
        })
        .state("user.topic.details", {
            url: "/details/:id",
            views: {
                "content@user": {
                    templateUrl: "feature/user/topic/topic-details.html"
                }
            },
            params: {course: null}
        })
        .state("user.topic.result", {
            url: "/result",
            views: {
                "content@user": {
                    templateUrl: "feature/user/topic/topic-result.html"
                }
            }
        })
});

Answer 1

您需要通过调用 function 来手动设置您的播放器如果<video>标签仅在页面加载完成后添加。

原因是video.js将扫描您的 HTML 并设置任何现有的 <video>自动标记，但不幸的是，当 Angular 更新它时，它无法观察 HTML 中的变化。 ( reference )

您可以在路由 Controller 中添加手动设置代码。