Question

readingController内 - ＆gt; checkRomanization当我尝试增加questionNumber时，它似乎只在隔离范围内这样做，即创建副本，但不更改main控制器中的变量。

conjugationController内 - ＆gt; checkConjugation但是，当我尝试增加questionNumber时，它会增加main控制器范围内的变量，这反映在AngularJS Batarang Chrome插件中以及页面上questionNumber绑定到一个元素。

var app = angular.module('Tutorials', ['functions', 'ui.utils', 'tutorials']).controller('main', function ($scope, $element, Position, Romanize) {
$scope.sectionNumber = Position.sectionNumber;
$scope.tutorialNumber = Position.tutorialNumber;
$scope.questionNumber = Position.questionNumber;
$scope.sections = sections;
$scope.currentMaterials = [];
$scope.usersRomanization = {text:""};
$scope.clickPause = clickPause;

$scope.readingController = function ($scope, Romanize){
    $scope.currentMaterials = $scope.sections[$scope.sectionNumber].tutorials[$scope.tutorialNumber].material;
    $scope.currentMaterial = $scope.currentMaterials[$scope.questionNumber];
    $scope.getRomanization = function(Romanize){
        Romanize.get($scope.currentMaterial).then(function(d){
            $scope.romanized = d;
        });     
        $scope.$apply();
    };
    $scope.getRomanization(Romanize);
    $scope.$apply();

    $scope.checkRomanization = function(){
        if (!checkTime($scope)){return}
        if ($scope.romanized === $scope.usersRomanization.text){
            $scope.usersRomanization.text = '';
            $scope.questionNumber++;
            $scope.currentMaterial = $scope.currentMaterials[$scope.questionNumber];
            $scope.getRomanization(Romanize);
            $scope.$apply();
        };
        $scope.$apply();
    }
}
$scope.conjugationController = function (){
    var loadNewVerbs = function (scope) {
        scope.currentMaterials = scope.sections[scope.sectionNumber].tutorials[scope.tutorialNumber].material;
        if (scope.currentMaterials === undefined) {
            alert("Out of new questions");
            return
        }
        scope.verbs = conjugate(scope.currentMaterials[scope.questionNumber]);
        scope.correct = scope.verbs.conjugations[0].text;
        fisherYates(scope.verbs.conjugations);
        scope.$apply();
    };
    loadNewVerbs($scope);
    $scope.checkConjugation = function (answer) {
        if (!checkTime($scope)){return}
        answer.colorReveal = "reveal-color";
        if (answer.text === $scope.correct) { //if correct skip to congratulations          
            $scope.questionNumber++;
            setTimeout(function () {
                loadNewVerbs($scope);
                $scope.$apply();
            }, 500);
        };
    };
};

对我而言，这表明控制器在HTML中的嵌套方式不同，但它们不是，它们是兄弟姐妹（由ng-switch上的sectionNumber控制）

<body ng-controller="main">
    <div id="sidebar_left"><div id="header"></div>
        <ul id="nav" menu-accordion="header = 'section_title'">
            <ul ng-repeat="section in sections">
                <li  class="section_title {{section.active}}" >
                    {{section.name}}
                </li>
                <ul>
                    <li class="tutorial_title {{tutorial.active}}" ng-click="loadFromMenu($parent.$index, $index)" ng-repeat="tutorial in section.tutorials">
                        {{tutorial.name}}
                    </li>
                </ul>
            </ul>
        </ul>
        <span class="question-number">{{questionNumber}}/{{currentMaterials.length}}</span>
        </div>
    <div  id="container">
            <video ng-click="clickPause()" poster="./poster.png" video-watcher class="video-js vjs-default-skin" id="myvideo" congrats="questionNumber" video-loader="currentTutorialName" id="video" controls>
                <source type="video/mp4" src="{{currentTutorialName}}.mp4"></source>
                <source type="video/webm" src="{{currentTutorialName}}.webm"></source>
                Your browser does not support the video tag.
            </video>
            <br />
            <button ng-click="replay()" id="reset">Replay</button>
        <br />
        <div ng-switch on="sectionNumber" id="panel">
            <div ng-switch-when="0" ng-controller="readingController"><div id="base">{{currentMaterial}}</div><br />
                <input placeholder="Enter text" ui-keyup="{13:'checkRomanization()'}"  ng-model="usersRomanization.text"></input>
                <button ng-click="checkRomanization()">Check</button>
            </div>
            <div ng-switch-when="1" ng-controller="conjugationController">  
                <div id="base">{{verbs.base}}</div>
                <ul class="answers">
                    <li ng-click="checkConjugation(answer)" ng-repeat="answer in verbs.conjugations" class="{{answer.colorReveal}} answer {{answer.correct}}" id="answer{{$index}}">
                        {{answer.text}}
                    </li>
                </ul>
            </div>
        </div>
        <br />
        <br />
        <br />
        <div class="message" >{{message}}</div>
    </div>
</body>

那到底是什么？

访问父范围

0 个答案: