Tab을 사용하여 AngularJS 다중 페이지 양식

Question

안녕하세요, tabs의 angularJS를 사용하여 다단계 양식을 구현하려고합니다. 이 응용 프로그램에서 경로를 사용하고 싶지 않습니다.

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-클릭) 이벤트에 능숙하게 변화하고있다. 내가 컨트롤러 기능 포스트 이벤트의 성공의 탭을 변경하고자하지만, 그것은

어떤 지원을받을 기대 :(작동하지 않습니다. 내가 AngularJS와의 새로운 오전 PS.

Answer 1

그것은이기 때문에 "이" 당신의 약속에서 함수가 컨트롤러의 "this"를 참조하지 않는다면, 이것을 참조 할 수있는 새로운 변수를 만들고 리턴 함수에서 사용하십시오.이 예제에서 나는 그 변수의 이름을 root라고합니다 :

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 !"); 
      }); 
    } 
}]);