Angular JS - 다른 탭으로 이동하고 클릭시 기능 호출 -

다른 탭에 제출 된 하나의 탭과 애플리케이션 목록에 양식이 있습니다. 양식에서 edit을 누르면 데이터베이스에서 데이터를로드하고 다른 탭으로 이동해야합니다. ng-click에서 데이터를 검색 할 수는 있지만 탭을 변경할 수는 없습니다. navbar.htmlAngular JS - 다른 탭으로 이동하고 클릭시 기능 호출 -

<nav class="navbar navbar-default navbar-cls-top " role="navigation" style="margin-bottom: 0"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse"> 

      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="index.html"></a> 
    </div> 

    <div class="header-right"> 



     <a href="" ng-click="logout()" class="btn btn-danger" title="Logout"><i class="fa fa-sign-out fa-2x"></i></a> 

    </div> 
</nav> 
<!-- /. NAV TOP --> 
<nav class="navbar-default navbar-side" role="navigation" style="width:200px"> 
    <div class="sidebar-collapse"> 
     <ul class="nav" id="main-menu"> 
      <li> 
        <div class="inner-text"> 
         {{user.name}} 
        <br /> 
         <small> </small> 
        </div> 
       </div> 

      </li> 

      <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 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.html :

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <title>Dashboard For Applications</title> 
</head> 

<body> 
    <div id="wrapper"> 
     <div id="page-wrapper"> 
      <div id="page-inner"> 
       <div class="row"> 
        <div class="col-md-12"> 
         <h1 class="page-head-line"> 
          <div class="alert alert-danger"> 
           DASHBOARD 
          </div> 
         </h1> 
         <h1 class="page-subhead-line"> 
          <div class="alert alert-info"> 
           Welcome! Here is the list of applications you have saved or submitted. <br><br> 
          </div> 
         </h1> 
        </div> 
       </div> 

       <div class="row"> 
        <div class="col-md-12"> 

         <div class="panel panel-default"> 
          <div class="panel-heading"> 
           <h3>Applications List</h3> 
          </div> 
          <div class="panel-body"> 
           <table ng-if="applicationList" st-table="applicationTable" class="table table-striped"> 
            <tr> 
             <th>Application Number</th> 
             <th>Project Title</th> 
             <th>Project Description</th> 
             <!-- <th>DataSet Available</th> --> 
             <!-- <th>Impact</th> --> 
             <th>Number of Interns</th> 
             <th>Expected SkillSet</th> 
             <th>Software Licenses Needed</th> 
             <th>Hardware Requirements</th> 
             <th></th> 
             <th></th> 
            </tr> 
            <tbody> 
             <tr ng-repeat="application in applicationList"> 
              <td class="col-md-2">{{application.number}}</td> 
              <td class="col-md-2">{{application.title}}</td> 
              <td class="col-md-2">{{application.description}}</td> 
              <!-- <td><span ng-repeat='area in idt.areas'>{{area}}, </span></td> --> 
              <!-- <td class="col-md-2">{{application.technical}}, {{application.business}}</td> --> 
              <td class="col-md-2">{{application.numberOfInterns}}</td> 
              <td class="col-md-2">{{application.skillSet}}</td> 
              <td class="col-md-2">{{application.software}}</td> 
              <td class="col-md-2">{{application.hardware}}</td> 
              <td><button class="btn btn-danger" ng-click="remove(application._id)" ng-show="application.state=='saved'">Delete</button></td> 
              <td><button class="btn btn-warning" ng-click="selectedMenu='applicationForm'; edit(application._id)" ng-show="application.state=='saved'">Edit</button></td> 
              <!-- <td><button class="btn btn-warning" ng-click="selectedMenu='dashboard'; edit(application._id)" ng-show="application.state=='saved'">Edit</button></td> --> 
             </tr> 
            </tbody> 
           </table> 
          </div> 
         </div> 
        </div> 
        <!-- /. ROW --> 
        <hr /> 
       </div> 
       <!--/.ROW--> 
      </div> 
      <!-- /. PAGE INNER --> 
     </div> 
     <!-- /. PAGE WRAPPER --> 
    </div> 
    <!-- /. WRAPPER --> 
</body> 

</html>

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) { 
     $scope.user = user; 
     AuthService.setUser(user); 

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

     var refresh = function(){ 
      $http.get('/application/applicationList').then(function(response){ 
       console.log("I got the applications I requested"); 
       $scope.applicationList = response.data; 
       console.log($scope.applicationList); 
       $scope.pagination = {}; 
       // $scope.totalItems = 200; 
       $scope.pagination.currentPage = 0; 
       $scope.numPerPage = 10; 
      }); 

     }; 
     refresh(); 

     $scope.remove = function(id){ 
      var del = false; 
      swal({ 
       title: 'Are you sure?', 
       text: "You won't be able to revert this!", 
       type: 'warning', 
       showCancelButton: true, 
       confirmButtonColor: '#3085d6', 
       focusCancel: true, 
       allowEscapeKey: true, 
       allowEnterKey: true, 
       allowOutsideClick: true, 
       cancelButtonColor: '#d33', 
       confirmButtonText: 'Yes, delete it!', 
       cancelButtonText: 'No, cancel!', 
       confirmButtonClass: 'btn btn-success', 
       cancelButtonClass: 'btn btn-danger', 
       buttonsStyling: false 
       }).then(function() { 
        $http.delete('/application/applicationlist/'+id).then(function(response){ 
         clear(); 
         refresh(); 
        }); 
        swal(
        'Deleted!', 
        'Your Application has been deleted.', 
        'success' 
        ) 
       }, function (dismiss) { 
       // dismiss can be 'cancel', 'overlay', 
       // 'close', and 'timer' 
        if (dismiss === 'cancel') { 
         swal(
          'Cancelled', 
          'Your Application is safe :)', 
          'error' 
         ) 
        } 

      }) 
     }; 

     $scope.edit = function(id){ 
      console.log(id); 
      console.log("Edit function called"); 
      $http.get('/application/applicationList/'+id).then(function(response){ 
       $scope.application = response.data; 
       console.log($scope.application); 
       //refresh(); 
       $scope.changeTab(event, 'page1'); 
      }); 

     }; 

     var clear = function(){ 
      $scope.application = { 
       technical: false, 
       business: false 
      }; 
     }; 


    }]); 
})();

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

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

     $scope.application = { 
      technical: false, 
      business: false 
     }; 

     var refresh = function(){ 
      $http.get('/application/applicationList').then(function(response){ 
       console.log("I got the applications I requested"); 
       $scope.applicationList = response.data; 
       console.log($scope.applicationList); 
       $scope.pagination = {}; 
       // $scope.totalItems = 200; 
       $scope.pagination.currentPage = 0; 
       $scope.numPerPage = 10; 
      }); 

     }; 
     refresh(); 

     $scope.saveApplication = function(){ 
      console.log($scope.application); 
      console.log($scope.applicationList); 
      var check = 0; 
      $scope.application.state = "saved"; 
      $scope.application.userEmail = $scope.user.email; 

      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){ 
        //$scope.contact = response.data; 
        refresh(); 
       }); 
      } 
      else{ 
       $http.post('/application/applicationList', $scope.application).then(function(response){ 
        console.log(response); 
        refresh(); 
       }); 
      } 
      swal({ 
       title: "Great!", 
       text: "We have saved your application", 

       type: "success", 
       timer: 3000, 
       confirmButtonText: "Wohoo!" 
      }); 
      clear(); 
     }; 


     $scope.submitApplication = function(){ 
      console.log("Submit called"); 
      console.log($scope.application.title); 
      console.log($scope.user.email); 
      $scope.application.userEmail = $scope.user.email; 
      $scope.application.state = "submit"; 
      var check = 0; 

      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('/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!" 
      }); 
      clear(); 
     }; 

     var clear = function(){ 
      $scope.application = { 
       technical: false, 
       business: false 
      }; 
     }; 

     //Universities 
     $scope.application.selectname1={id:100,name: 'None'}; 
     $scope.application.selectname2={id:100,name: 'None'}; 
     $scope.application.selectname3={id:100,name: 'None'}; 

     $scope.filter1 = function(item){ 
      return (!($scope.application.selectname1&&$scope.application.selectname1.id)||item.id !=$scope.application.selectname1.id||item.id==100); 
     }; 

     $scope.filter2 = function(item){ 
      return (!($scope.application.selectname2&&$scope.application.selectname2.id)||item.id!=$scope.application.selectname2.id||item.id==100); 
     }; 
     $scope.filter3 = function(item){ 
      return (!($scope.application.selectname3&&$scope.application.selectname3.id)||item.id !=$scope.application.selectname3.id||item.id==100); 
     }; 
     $scope.universities = [ 
      { 
       id:1, 
       name: 'IITs' 
      }, 
      { 
       id:2, 
       name: 'IIITs' 
      }, 
      { 
       id:3, 
       name: 'BITS' 
      }, 
      { 
       id:4, 
       name: 'IISc' 
      }, 
      { 
       id:100, 
       name: 'None' 
      } 
     ]; 


     //Degrees 
     $scope.application.selectdegree1={id:100,name: 'None'}; 
     $scope.application.selectdegree2={id:100,name: 'None'}; 
     $scope.application.selectdegree3={id:100,name: 'None'}; 

     $scope.filterDegree1 = function(item){ 
      return (!($scope.application.selectdegree1&&$scope.application.selectdegree1.id)||item.id !=$scope.application.selectdegree1.id||item.id==100); 
     }; 

     $scope.filterDegree2 = function(item){ 
      return (!($scope.application.selectdegree2&&$scope.application.selectdegree2.id)||item.id!=$scope.application.selectdegree2.id||item.id==100); 
     }; 
     $scope.filterDegree3 = function(item){ 
      return (!($scope.application.selectdegree3&&$scope.application.selectdegree3.id)||item.id !=$scope.application.selectdegree3.id||item.id==100); 
     }; 
     $scope.degrees = [ 
      { 
       id:1, 
       name: 'PhD' 
      }, 
      { 
       id:2, 
       name: 'Masters' 
      }, 
      { 
       id:3, 
       name: 'BTech' 
      }, 
      { 
       id:100, 
       name: 'None' 
      } 
     ]; 

     $scope.pageChanged = function() { 
      //alert('Page changed to: ' + $scope.pagination.currentPage); 
      //$scope.pagination.currentPage = page; 
      var begin = (($scope.pagination.currentPage - 1) * $scope.numPerPage); 
      //var end = begin + $scope.numPerPage; 
      $scope.getPatents(begin) 
     }; 


    }]); 
})();

출처

2017-09-14 Tarun

일반적으로 조건부 UI 변경에 대한'ngShow'을 사용하십시오 : 당신이 /dashboard로 이동되면 app.html 부모 상태에 중첩 표시 할 dashboard.html의 내용에 대한 <div ui-view></div> 태그를 포함해야합니다. 그런 다음 변수를 'true/false'값을 유지하도록 설정하고이를 'ngShow'에 대한 스위치로 사용합니다. 예를 들어 당신은'$ scope.showTab = false'를 가지고 있고 나머지 두 요소는 각각'ngShow = {$ scope.showTab}'과'ngShow = {! $ scope.showTab}'를 사용할 것입니다. –

@Matt newelski - 계기판과 응용 프로그램을위한 2 개의 다른 HTML 파일을 가지고 있기 때문에 나는 가지고있는 구조에서 그렇게하는 법을 이해할 수 없었습니다 – Tarun

['$ state.go'] (https : // github .com/angular-ui/ui-router/wiki/빠른 참조 # stategoto - toparams - options)? –

@Tarun 정확히 말했듯이, 구조가 문제가되면 부모/추상 상태의 대시 보드 및 대시 보드 및 하위 페이지의 다른 페이지가 있어야합니다. 따라서 app.html에서 navbar 및

이

$stateProvider 
    .state('login', { 
     url: "/login", 
     templateUrl: 'pages/login.html', 
     controller: 'LoginController', 
     data: { 
      requireLogin: false 
     } 
    }) 

    .state('app', { 
     abstract: true, 
     url: '/app', 
     templateUrl: 'views/app.html', 
     data: { 
      requireLogin: true 
     } 
    }) 

    .state('app.dashboard', { 
     url: '/dashboard', 
     controller: 'DashboardCtrl', 
     templateUrl: 'pages/map.html', 
     data: { 
      requireLogin: true 
     } 
    });

출처

2017-09-14 07:29:34 johan

좋아요,이 일을 확인해 드리겠습니다. – Tarun

안녕하세요, 답변 해 주셔서 감사합니다. 나는 $ state.go를 사용하여 그것을 할 수있었습니다. 다음 번에 구조를 기록 할 것입니다. – Tarun

Angular JS - 다른 탭으로 이동하고 클릭시 기능 호출 -

답변

관련 문제