javascript - ng-click - 提交表单上的更改选项卡

Question

我有一个平均堆栈应用程序，其中有一个用于导航的左侧面板。其中一个选项卡有一个表单，在我提交表单后，我调用了一个函数，该函数在成功完成后有一个 $state.go('secured.dashboard'); 将它重定向到另一个选项卡(仪表板)。这工作正常，但在左侧面板上，上一个选项卡(申请表选项卡) 仍突出显示为事件状态。虽然，在单击选项卡时，事件菜单会正确突出显示。

所以，问题是当我点击提交时，它重定向到另一个选项卡(dashboard) 但在左侧导航面板上，一些其他选项卡(application Form) 突出显示，尽管我更改了变量 $scope.selectedMenu = "dashboard";。我已经从文件中添加了相关的代码片段:

header-template.html

<nav class="navbar-default navbar-side" role="navigation" style="width:200px">
  <div class="sidebar-collapse">
    <ul class="nav" id="main-menu">
      <li>
        <a id="page1" ng-class='{"active-menu": selectedMenu == "dashboard"}' ui-sref="secured.dashboard" ng-click='selectedMenu = "dashboard"'><i class="fa fa-dashboard "></i>Dashboard</a>
      </li>
      <li>
        <a id="page2" ng-class='{"active-menu": selectedMenu == "applicationForm"}' ui-sref="secured.applicationForm" ng-click='selectedMenu = "applicationForm"'><i class="fa fa-handshake-o "></i>Application Forms</a>
      </li>
      <li>
        <a id="page3" ng-class='{"active-menu": selectedMenu == "adminprofile"}' ui-sref="secured.adminprofile" ng-click='selectedMenu = "adminprofile"' ng-show="adminUserTrue"><i class="fa fa-user-secret"></i>Administrator</a>

      </li>
      <li>
        <a id="page4" ng-class='{"active-menu": selectedMenu == "managerProfile"}' ui-sref="secured.managerProfile" ng-click='selectedMenu = "managerProfile"' ng-show="isManager"><i class="fa fa-user-secret"></i>Manager</a>

      </li>
      <li>
        <a ng-class='{"active-menu": selectedMenu == "logout"}' href="" ng-click="logout()" ng-click='selectedMenu = "logout"'><i class="fa fa-sign-out fa-fw"></i> Logout</a>
      </li>


    </ul>

  </div>

</nav>

dashboard.js

(function() {
  var app = angular.module('dashboard', []);
  app.config(['$stateProvider', function($stateProvider) {
    $stateProvider.state('secured.dashboard', {
      url: '/dashboard',
      controller: 'DashboardController',
      templateUrl: '/views/dashboard.html'
    });
  }]);

  app.controller('DashboardController', ['$scope', 'AuthService', 'user', '$state', '$http', function($scope, AuthService, user, $state, $http) {
      console.log("yes, the controller is here");
      $scope.user = user;
      AuthService.setUser(user);
      $scope.applicationShow = {};

      $scope.logout = function() {
        AuthService.logout().then(function() {
          $scope.user = null;
          $state.go('unsecured');
        })
      }

applicationForm.js

(function() {
    var app = angular.module('applicationForm', []);
    app.config(['$stateProvider', function($stateProvider) {
      $stateProvider.state('secured.applicationForm', {
        url: '/applicationForm',
        controller: 'applicationFormController',
        templateUrl: '/views/applicationForm.html',
        params: {
          obj: null
        }
      });
    }]);

    app.controller('applicationFormController', ['$http', '$scope', '$state', '$uibModal', function($http, $scope, $state, $uibModal) {

            console.log($state.params.obj);

            if ($state.params.obj == null) {
              $scope.application = {
                technical: false,
                business: false
              };
            } else {
              $scope.application = $state.params.obj;
            }

            console.log("I am finally the application");
            console.log($scope.application);

            $scope.submitApplication = function() {
              $scope.submitted = true;
              console.log("Submit called");
              console.log($scope.application.title);
              console.log($scope.user.email);
              console.log("Yes, i am here!");

              console.log($scope.application.userEmail);
              $scope.application.state = "SUBMITTED";
              $scope.application.heirarchy = $scope.managerjson[$scope.application.managerName].senior;
              console.log($scope.application.heirarchy);
              var check = 0;

              $http.get('/application/applicationlistNum/').then(function(response) {

                $scope.application.number = response.data.value.sequence_value;
                console.log($scope.application.number);
                for (var i = 0, len = $scope.applicationList.length; i < len; i++) {
                  if ($scope.applicationList[i]._id == $scope.application._id) {
                    check = 1;
                    console.log("matched");
                    break;
                  }
                }

                if (check == 1) {
                  $http.put('/application/applicationlist/' + $scope.application._id, $scope.application).then(function(response) {
                    refresh();
                  });
                } else {
                  $http.post('/application/applicationList', $scope.application).then(function(response) {
                    console.log("Successfully submitted");
                    refresh();
                  });
                }
                swal({
                  title: "Great!",
                  text: "We have received your request",
                  type: "success",

                  timer: 3000,
                  confirmButtonText: "Wohoo!"
                });
                var contactInfo = {
                  managerEmail: $scope.application.managerName,
                  selfEmail: $scope.application.userEmail,
                  name: $scope.managerjson[$scope.application.managerName].name
                };
                clear();
                sendMail(contactInfo);
                console.log("changing states");
                $scope.selectedMenu = "dashboard";
                $state.go('secured.dashboard');
              });

            };

applicationForm.html

<div class="col-lg-12">
  <form class="well form-horizontal" id="contact_form" ng-submit="submitApplication()" name="form">
    <fieldset>
      <!-- some more fields -->
      <div class="form-group">
        <label class="col-md-4 control-label"></label>
        <div class="col-md-2">
          <button type="submit" class="btn btn-primary"> Submit <span class="glyphicon glyphicon-send"></span></button>
          <!-- <button class="btn btn-primary" ng-click="submitApplication()"> Submit <span class="glyphicon glyphicon-send"></span></button> -->
        </div>
        <div>
          <button class="btn btn-warning" ng-click="saveApplication()"> Save <span class="glyphicon glyphicon-floppy-disk"></span></button>
        </div>

      </div>

    </fieldset>
  </form>

Answer 1

在 applicationForm.js 中将 $scope.selectedMenue = 'dashboard' 更改为

 $scope.selectedMenu = {name : "dashboard"};

在您的页眉模板

 <ul class="nav" id="main-menu">
  <li>
    <a id="page1" ng-class='{"active-menu": selectedMenu.name == "dashboard"}' ui-sref="secured.dashboard" ng-click='selectedMenu.name= "dashboard"'><i class="fa fa-dashboard "></i>Dashboard</a>
  </li>
  <li>
    <a id="page2" ng-class='{"active-menu": selectedMenu.name== "applicationForm"}' ui-sref="secured.applicationForm" ng-click='selectedMenu.name= "applicationForm"'><i class="fa fa-handshake-o "></i>Application Forms</a>
  </li>
  <li>
    <a id="page3" ng-class='{"active-menu": selectedMenu.name== "adminprofile"}' ui-sref="secured.adminprofile" ng-click='selectedMenu.name= "adminprofile"' ng-show="adminUserTrue"><i class="fa fa-user-secret"></i>Administrator</a>

  </li>
  <li>
    <a id="page4" ng-class='{"active-menu": selectedMenu.name== "managerProfile"}' ui-sref="secured.managerProfile" ng-click='selectedMenu.name= "managerProfile"' ng-show="isManager"><i class="fa fa-user-secret"></i>Manager</a>

  </li>
  <li>
    <a ng-class='{"active-menu": selectedMenu.name== "logout"}' href="" ng-click="logout()" ng-click='selectedMenu.name= "logout"'><i class="fa fa-sign-out fa-fw"></i> Logout</a>
  </li>


</ul>