0

因此，当我单击教程导航菜单时，它会触发 ng-click="loadNewTutorial($index)" 函数，一切正常 tutorialNumber 会通过索引号更新，进而更改当前视频的 URL。唯一的问题是 video.load()/video.play() 显然会在 DOM 中发生更改之前触发，因为视频总是落后 1 次点击。我的意思是我可以单击菜单项来加载第二个教程视频，但它会加载第一个，然后我下一次单击它会加载第二个，然后如果我再次单击第一个它将卡在第二个直到我再次单击第一个。所以当前视频没有及时加载正确的 URL，总是落后 1 次！如何让 video.load() 函数等到 DOM 中的视频 src 属性发生更改后再触发？

<!DOCTYPE html>
<html ng-app="Tutorials">
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script> 
        <script src="./functions.js"></script>
        <script src="./tutorials.js"></script>
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
        <script type="text/javascript" src="./script-ng.js"></script>   
        <link rel="stylesheet" href="main.css"></link>
    </head>
    <body ng-controller="getAnswers">
        <div id="sidebar_left"><div id="header"></div>
            <ul id="nav" ng-repeat="section in sets">
                <li  class="section_title {{section.active}}" >
                    {{section.name}}
                </li>
                <ul><li class="tutorial_title {{tutorial.active}}" ng-click="loadNewTutorial({{$index}})" ng-repeat="tutorial in section.tutorials">{{tutorial.name}}</li></ul>
            </ul><span>{{score}}</span>
            </div>
        <div id="container">
                <video id="video" controls>
                    <source src="{{videoURLs[tutorialNumber]}}.mp4"></source>
                    <source src="{{videoURLs[tutorialNumber]}}.webm"></source>
                    Your browser does not support the video tag.
                </video>
                <br />
                <button id="reset">Replay</button>
            <br />
            <div  id="pannel">
                <div id="base">{{verbs.base}}</div>
                <ul class="answers">
                    <li ng-click="checkAnswer(answer)" ng-repeat="answer in verbs.conjugations" class="{{answer.colorReveal}} answer {{answer.correct}}" id="answer{{$index}}">{{answer.text}}</li>
                </ul>
            </div>
            <br />
            <br />
            <br />
            <div id="warning"></div>
        </div>
    </body>
</html>



angular.module('Tutorials', ['functions', 'tutorials']).controller('getAnswers', function ($scope, $element) {
    $scope.sectionNumber = 0;
    $scope.tutorialNumber = 0;      
            $scope.loadNewVerbs = function () {
            $scope.verbs = conjugate(conjugationsets[$scope.tutorialNumber][$scope.questionNumber]);
            $scope.correct = $scope.verbs.conjugations[0].text;
            fisherYates($scope.verbs.conjugations);
        };
    $scope.checkAnswer = function (answer) { 
        if (false) {//wait for tutorial to pause
            $("#warning").text("Not yet!").fadeIn(300).delay(1400).fadeOut(300);
            return;
        };
        answer.colorReveal = "reveal-color";
        if (answer.text === $scope.correct) {   //if correct skip to congratulations            
            $scope.questionNumber++;
        if(sectionNumber === 0 && $scope.tutorialNumber ===0){  //if first video play congratulations etc
            congrats();
        }
        setTimeout(function () {
            $scope.loadNewVerbs();
            $scope.$digest();
        }, 2000);
        } else { //if incorrect skip to try again msg
            if(sectionNumber === 0 && $scope.tutorialNumber ===0){start(160.5); pause(163.8)}
        }
    };
    $scope.sets = [{
        active:"inactive",
        name: "Conjugation",
        tutorials: [
            {active:"inactive",name: "ㅗ and ㅏ regular"}, 
            {active:"inactive",name:"ㅜ, ㅓ and ㅣ regular"}, 
            {active:"inactive",name:"ㅏ and ㅓ reductive"},
            {active:"inactive",name: "ㅗ and ㅜ reductive"},
            {active:"inactive",name: "ㅣ reductive"}]
    }, {
        active:"inactive",
        name: "Sentence_Building",
        tutorials: [
            {active:"inactive",name:"Particles"}, 
            {active:"inactive",name:"Word Order"}]
    }];
    $scope.video = $("#video").get(0);
    $scope.videoURLs = ["ㅗㅏregular", "ㅜㅓㅣregular"];

    $scope.loadNewTutorial = function (tut) {
        $scope.score = 0;
        $scope.questionNumber = 0;
        if(tut){
            $scope.tutorialNumber = tut;
        }
        video.load();
        video.play();
        video.hasPlayed = true;
        $(video).bind('ended', endVideoHandler);

        $scope.loadNewVerbs();
    };  

    $scope.loadNewTutorial();

    var congrats = function(){
        if ($scope.questionNumber === 1) {start(164.15); pause(166.8); $scope.score++;
        } else if ($scope.questionNumber === 2) {start(167.1); pause(170); $scope.score++;
        } else if ($scope.questionNumber === 3) {
            start(171.1); $scope.score ++;$scope.questionNumber = 0;$scope.tutorialNumber++;
        }
    }   

    function endVideoHandler() {
        $(this).unbind('ended');
        if (!this.hasPlayed) {
            return;
        }
        $scope.tutorialNumber++;
        $scope.$digest();
        this.currentTime = 0;
        $scope.loadNewTutorial();
    }
});

var conjugationsets = [
    ["작다", "놀다", "닦다"],
    ["웃다", "울다", "멀다"]
];
var sectionNumber = 0;
var tutorialNumber = 0;
var questionNumber = 0;


$(function () {

    $("#nav").accordion({
        heightStyle: "content",
        header: ".section_title"
    });


    $("#reset").click(function () {
        currentTutorial.currentVideo.videoObject.currentTime = 0;
        currentTutorial.currentVideo.start();
    });

});
4

2 回答 2

0

编辑： 我不确定我是否理解您的代码，但是为什么 loadNewTutorial 在 $scope 已经可用时将其作为参数？我猜这是您问题的一部分，因为您无法从模板将范围传递给它。

原文： “loadNewTutorial({{$index}})”应该是“loadNewTutorial($index)”。

于 2013-02-26T19:31:30.857 回答
0

我发现您的“loadNewTutorial”函数存在几个问题：

  1. 它在不应该使用 $scope 参数时将其作为参数（函数在 $scope 内定义，因此 $scope 默认情况下可用于函数）。

  2. 预计它会收到一个 $scope 作为它的第一个参数，但是在一个地方你用当前范围调用它，在另一个地方你在没有任何参数的情况下调用它，然后在视图中你在传递 $index 时调用它（解析为原始数字）作为它的第一个参数。

  3. 每次调用它时，它都会重新定义“loadNewVerbs”和“checkAnswer”函数。

仅举几个。

于 2013-02-26T19:59:37.610 回答