在 AngularJS 中删除项目后如何重新加载状态？

Question

In my project on click of the delete button am calling one function and inside that am calling the api with delete method. After successfully deleting the Project from projectlist i am reloading the state. Here problem is, i am passing the project id in the URL. So after deleting the item the project id is still there in the url, because of why on state reload already deleted project id which is already there in the url is reloaded with no value inside it.

Below am giving the codes for better understanding of the code.

survey.html

   <ul class="sidebar-nav">
            <li class="sidebar-brand" >
                <a>
                    Projects
                </a>
            </li>
            <li ng-repeat="obj in allProjects track by  $id(obj)">
                <a ui-sref="survey.surveyList({id: obj.ProjectID})" ng-click="getProjSurveys(obj.ProjectID)" ui-sref-active="activeProject" ng-init="getReloadProjSurveys()">{{obj.ProjectName}}<span class="projectsetting" ng-click="sendProjectID(obj.ProjectID)"><img src="./images/settings.png"/></span></a>
            </li>
         </ul>
       <div class="surveyContainer" ui-view></div>

index.js (using UI routing)

   .state('survey', {
        url: '/survey',
        views:{
            header:{
                templateUrl: 'common/headerTool.html',
                controller: 'headerController'
            },
            pageContent:{
                templateUrl: 'survey/survey.html',
                  controller: 'surveyController'
            },
            footer:{
                templateUrl: 'common/innerFooter.html',
                controller: 'footerController'
            }
        }
    }).state('survey.surveyList', {
        url: '/:id',
        templateUrl: 'survey/surveyList.html',
        controller: ''
    });

popup.html this is where am showing the delete confirmation popup

  <div class="modal fade" id="deleteProject" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
   <div class="modal-dialog" role="document">
    <div class="modal-content">
     <div class="modal-body">
        <p class="text-center">Are you sure you want to delete this project</p>
     </div>
    <div class="modal-footer">
     <div class="col-md-6 text-right"><span type="button" class="cancel" data-dismiss="modal">Cancel</span></div>
     <div class="col-md-offset-1 col-md-5 text-left"><span type="button" class="success" value="Delete" ng-click="projectDelete()" >Delete</span></div>
    </div> 
  </div>

On click on this button am calling projectDelete() which is inside this controller

surveyController.js

  $scope.sendProjectID = function(ProjectID){
     $scope.ProjectID = ProjectID;
   };
  $scope.projectDelete = function($event){
      $("#deleteProject").hide();
       UserService.DeleteProject($scope.ProjectID).then(
       function( data ) {
          console.log(data);
          state.reload();
         //$state.go('survey.surveyList',{id: 0});
         $("#deleteProject").modal("hide");
      });
   };

I tried with state.reload() and $state.go('survey.surveyList',{id: 0}); . This $state.go() with id=0 is default one which i want to reload.

Answer 1

did you try this $state.go('survey.surveyList',{id: 0}, {reload : true}); ?

reference : https://github.com/angular-ui/ui-router/wiki/quick-reference#toparams