javascript - 在 angularjs 中创建一系列显示/隐藏屏幕

Question

我的任务是实现一系列教程屏幕。用户要么从一个移动到下一个，要么选择退出，在这种情况下，教程本身就会消失。

有一个外部 div 包含每个“步骤”——步骤 1、步骤 2、步骤 3 等。如果用户单击“继续”按钮，则会显示后续步骤。这是第一步(编号为 0):

<div class="outerdiv" ng-show=isTutorialVisible>
   <div class="step step--0" ng-show="go-to-step == 0">
     <div class="row-fluid">
           <h2 class="welcome__head">Welcome to Our Store</h2>
                 <div class="welcome__buttons">
                    <a href="" class="button">No, thanks</a>
                    <a href=""  class="button--primary"
                              ng-click="moveToNextScreen(1);">Continue</a>
                       </div>
                  </div> 
         <div class="span3">
            <button type="button" class="close-button" ng-click="close();">Close</button>
        </div>
    </div> 

因此，单击“继续”按钮应将用户带到下一步。

我在 Controller 中有:

 $scope.goToStep = 0;    //or should this just be var goToStep?
 $scope.moveToNextScreen = function (screenNumber){
  goToStep = screenNumber;
 }

但是当页面运行时，如果我在控制台中输入作用域上的任何变量(例如 goToStep)，它会显示未定义的 ReferenceError。这是为什么？

感谢您的帮助。

Answer 1

在此:

goToStep = screenNumber;

goToStep 未定义。您应该使用:

$scope.goToStep = screenNumber;