Question

因此，当我点击教程导航菜单时，它会触发ng-click =“loadNewTutorial（$ index）”函数，一切正常，tutorialNumber会被索引号更新，而这会更改当前视频的URL。唯一的问题是video.load（）/ video.play（）显然会在DOM发生更改之前触发，因为视频总是一次点击后面。我的意思是我可以点击菜单项来加载第二个教程视频，但它将加载第一个，然后我点击它的NEXT时间将加载第二个，然后如果我再次点击第一个它将被卡在第二个直到我再次点击第一个。所以当前的视频没有及时加载正确的URL，总是一次点击！如何使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();
    });

});

Answer 1

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

原： “loadNewTutorial（{{$ index}}）”应为“loadNewTutorial（$ index）”。

Answer 2

我看到你的“loadNewTutorial”函数有几个问题：

当它不应该将$ scope参数作为参数时（函数在$ scope内定义，因此默认情况下$ scope可用于该函数）。
预计会收到$ scope作为它的第一个参数，但在一个地方你用当前范围调用它，在其他地方你调用它没有任何参数然后在视图中你调用它传递$ index（解析为原始数字）作为它的第一个参数。
每次调用它时都会重新定义'loadNewVerbs'和'checkAnswer'功能。

仅举几例。

等待DOM src属性改变

2 个答案: