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

How to reload the state after deleting an item in AngularJS?

本文关键字:项目 状态 加载 新加载 一个 AngularJS 删除      更新时间:2023-09-26

在我的项目上点击删除按钮我调用一个函数和里面,我调用api与删除方法。从项目列表中成功删除项目后,我正在重新加载状态。这里的问题是,我在URL中传递项目id。因此,在删除项目后,项目id仍然存在于url中,因为为什么on state reload已经删除了项目id,它已经存在于url中,被重新加载,里面没有值。

为了更好地理解代码,我在下面给出了代码。

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(使用UI路由)

   .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 这就是我显示删除确认弹出窗口的地方

  <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>

点击这个按钮我调用projectDelete()它在这个控制器里面

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

我尝试了state.reload()$state.go('survey.surveyList',{id: 0});。这个id=0的$state.go()是我想重新加载的默认值

你试过这个$state.go('survey.surveyList',{id: 0}, {reload : true});了吗?

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