javascript - Videogular未加载

我正在尝试在我的网站中实现Videogular，但没有下载GitHub项目随附的所有内容。我只想使用videogular.js，插件和默认主题。但是，当我加载页面时，未实现其默认的HTML5视频播放器和Videogular。

我的html代码如下所示:

<html ng-app="myapp">
    <head>
        <script src="angular.min.js"></script>
        <script src="jquery-2.0.3.min.js"></script>
        <script src="videogular/videogular.js"></script>
        <script src="videogular/plugins/controls.js" type="text/javascript"></script>
        <script src="videogular/plugins/overlay-play.js" type="text/javascript"></script>
        <script src="videogular/plugins/buffering.js" type="text/javascript"></script>
        <script src="videogular/plugins/poster.js" type="text/javascript"></script>
        <script src="videoserve.js"></script>
        <link rel="stylesheet" type="text/css" href="test.css">
    </head>
    <body ng-controller="MyController">
        <div id="videoDiv">
            <videogular vg-responsive="config.responsive" vg-autoPlay="config.autoPlay">
                <video class='videoPlayer' controls preload='metadata'>
                    <source src='assets/videos/Test 1080p HD.mp4' type='video/mp4'>
                </video>
                <vg-poster-image vg-url='config.plugins.poster.url' vg-stretch="config.stretch.value"></vg-poster-image>
                <vg-buffering></vg-buffering>
            </videogular>
        </div>
    </body>
</html>

我的js文件看起来像:

var app = angular.module('myapp', [
]);

app.controller('MyController', function($scope) {
    $scope.stretchModes = [
        {label: "None", value: "none"},
        {label: "Fit", value: "fit"},
        {label: "Fill", value: "fill"}
    ];

    $scope.config = {
        width: 740,
        height: 380,
        autoHide: false,
        autoPlay: true,
        responsive: false,
        stretch: $scope.stretchModes[0],
        transclude: true,
        theme: {
                url: "videogular/default/videogular.css",
                playIcon: "&#xe000;",
                pauseIcon: "&#xe001;",
                volumeLevel3Icon: "&#xe002;",
                volumeLevel2Icon: "&#xe003;",
                volumeLevel1Icon: "&#xe004;",
                volumeLevel0Icon: "&#xe005;",
                muteIcon: "&#xe006;",
                enterFullScreenIcon: "&#xe007;",
                exitFullScreenIcon: "&#xe008;"
            },
        plugins: {
            poster: {
                url: "assets/images/logo.png"
            }
        }
    };
});

我真的看不到任何我想念的东西。我在范围内有一个config对象和一个主题集(这显然是必需的)。有人看到我看不到的东西吗？

编辑:没关系，原来我忘了包括ngSantize和它的js文件到我的html header 中。

最佳答案

您需要将Videogular模块添加到模块初始化中。

var app = angular.module('myapp', [
            'ngSanitize',
            "com.2fdevs.videogular",
            "com.2fdevs.videogular.plugins.controls",
            "com.2fdevs.videogular.plugins.overlayplay",
            "com.2fdevs.videogular.plugins.buffering",
            "com.2fdevs.videogular.plugins.poster"
        ]
    );