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

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

有一个包含每个“步骤”的外部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>

因此，单击“继续”按钮将使用户进入下一步。

我在控制器中：

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

但是，当页面运行时，如果我在控制台中输入范围内的任何变量（例如goToStep），它将显示未定义的ReferenceError。这是为什么？

谢谢你的帮助。

最佳答案

在此：

goToStep = screenNumber;

未定义goToStep。您应该使用：

$scope.goToStep = screenNumber;