Question

我在Angular JS中以模态打开JW Player 8时遇到问题。

Home.html中

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script>
    <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="../Scripts/AngularControllers/HomeController.js"></script>
    <script src="../Scripts/Libraries/JWPlayer/jwplayer.js"></script>
    <script>jwplayer.key = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"</script>
    <script src="../Scripts/AngularControllers/VideoController.js"></script>
</head>
<body ng-app="appHome">
    <div ng-repeat="today in todayList">
        <img ng-src="{{today.image}}" ng-click="showVideo(today.desc)">
    </div>
</body>
</html>

HomeController.js

var homeApp = angular.module("appHome", ['ui.bootstrap']);

homeApp.controller("ctrlHome", ['$scope', '$uibModal', function ($scope, $uibModal) {

    $scope.todayList = [
        { image: 'Images/hqdefault.jpg', name: 'ABC ABC ', desc: 'Here I Am ' },
        { image: 'Images/hqdefault.jpg', name: 'DEF', desc: 'I will Rock' }
    ];

    $scope.showVideo = function (videoId) {
        var modalInstance = $uibModal.open({
            templateUrl: 'Video.html',
            controller: 'ctrlVideo',
            size: 'lg',
            resolve: {
                videoId: function () {
                    return videoId;
                }
            }
        })
    }
}]);

Video.html

<div id="myElement"></div>

VideoController.js

var myApp = angular.module('appHome');

myApp.controller("ctrlVideo", ['$scope', 'videoId', function ($scope, videoId) {
    var playerInstance = jwplayer("myElement");
    playerInstance.setup({
        file: "FileName",
        width: 640,
        height: 360
    });
}]);

我收到以下错误： -

TypeError：playerInstance.setup不是函数↵

经过进一步分析后，我发现Jwplayer无法在 VideoController.js 页面的 Video.html 中找到“<div id="myElement"></div>”。

请帮助解决错误。

Answer 1

最后我得到了答案。分析后非常清楚，当 VideoController.js 被调用时，那个时间点＆＃34; myElement＆＃34; Video.html 中定义的内容未加载。所以我必须在Angular JS中使用与document.ready相同的东西，并修改 VideoController.js ，如下所示： -

var myApp = angular.module('appHome');

myApp.controller("ctrlVideo", ['$scope', 'videoId', '$timeout', function ($scope, videoId, $timeout) {
     $timeout(function () {
        var playerInstance = jwplayer("myElement");
        playerInstance.setup({
            file: "FileName",
            width: 640,
            height: 360
        });
    });   
}]);

playerInstance.setup值在JWPlayer 8中未定义

1 个答案: