javascript - 使用 Tab 的 AngularJS 多页表单

Question

您好，我正在尝试使用 angularJS 的 Tab 实现多阶段表单。我不想在此应用程序中使用路由。

app.controller('createProjectController', ['$scope', 'resourceProject', function ($scope, resourceProject) {

  this.tab = 1;

  this.setTab = function (newValue) {
    this.tab = newValue;
  };

  this.isSet = function (tabName) {
    return this.tab === tabName;
  };

  $scope.project = {};

  $scope.postProject = function () {

    // console.log("Post  Here");
    // $scope.project.Id = null;
    resourceProject.postEvent().save($scope.project)
      .$promise.then(
      function (response) {
        console.log("Saved");
        //console.log(response);
        $scope.project = response;
        //Does not recognize this action
        console.log(this.tab);
// Not Working
        this.tab = 2;
// Not working setTab(2);

      },
      function (error) {
        console.log("It was broken !");
      });
  }
}]);

然后在 HTML 中我正在做以下事情:

  <section class="tab" ng-controller="createProjectController as tab">
            <ul class="nav nav-pills">
                <li ng-class="{ active: tab.isSet(1) }">
                    <a href ng-click="tab.setTab(1)">Project Information</a>
                </li>
                <li ng-class="{ active: tab.isSet(2) }">
                    <a href ng-click="tab.setTab(2)">Further Information</a>
                </li>
                <li ng-class="{ active: tab.isSet(3) }">
                    <a href ng-click="tab.setTab(3)">Groups</a>
                </li>
                <li ng-class="{ active: tab.isSet(4) }">
                    <a href ng-click="tab.setTab(4)">Chart</a>
                </li>
                <li ng-class="{ active: tab.isSet(5) }">
                    <a href ng-click="tab.setTab(5)">Specification</a>
                </li>
            </ul>

            @*First Tab Project Info*@

            <div ng-show="tab.isSet(1)">
                <h4>General Project Information</h4>
                <div>.....General form...</div>
    </div>
       <div ng-show="tab.isSet(2)">
                <h4>Further Information</h4>
                <blockquote>And so on </blockquote>
     </div>
// Similarly other tabs....

问题是:标签在点击(ng-click)事件中发生了很好的变化。但是因为我想在 Controller 功能中更改有关后事件成功的选项卡，所以它不起作用:(

期待得到一些支持。附言我是 AngularJS 的新手。

Answer 1

这是因为你的 promise then 函数中的“this”没有引用你 Controller 中的“this”。创建一个可以引用它的新变量，然后在返回函数中使用它。在这个例子中，我将该变量命名为 rootThis:

app.controller('createProjectController', ['$scope', 'resourceProject', function ($scope, resourceProject) {

    this.tab = 1;

    var rootThis = this;

    this.setTab = function (newValue) {
        this.tab = newValue;
    };

    this.isSet = function (tabName) {
        return this.tab === tabName;
    };

    $scope.project = {};

    $scope.postProject = function () {

        // console.log("Post  Here");
        // $scope.project.Id = null;
        resourceProject.postEvent().save($scope.project)
            .$promise.then(
            function (response) {
                console.log("Saved");
                //console.log(response);
                $scope.project = response;
                //Does not recognize this action
                console.log(rootThis.tab);
                // Not Working
                rootThis.tab = 2;
                // Not working setTab(2);

            },
            function (error) {
                console.log("It was broken !");
            });
    }
}]);