각도 UI 부트 스트랩 모달 결과가 정의되지 않았습니다.

Question

ng-grid 행의 버튼을 클릭 할 때 모달을로드하는 앱을 작성하고 있습니다. 모달과 올바른 데이터를 표시하는 것은 효과적입니다. 문제는 데이터를 모달의 양식에서 다시 가져 오는 것입니다. 'selectedItem가'

에 대한 코드

modalInstance.result.then(function(selectedItem){ 
       $scope.selected = selectedItem; 
      }); 

반환 '정의'의이 비트는 여기에 모달입니다.

<div ng-app="myApp"> 
    <div ng-controller="UsersCtrl"> 
     <script type="text/ng-template" id="editUserModal.html"> 
      <div class="modal-header"> 
       <h3 class="modal-title">Edit User <em>{{user.user_full_nm}} {{user.user_id}}</em></h3> 
      </div> 
      <div class="modal-body"> 
       <p>User Name: <input type="text" name="user_full_nm" value="{{user.user_full_nm}}"></p> 
       <p>Email: <input type="text" name="user_nm" value="{{user.user_nm}}"></p> 
       <p>Active: 
        <select ng-model="user.deleted" ng-selected="user.deleted"> 
         <option value="0" ng-selecte>Active</option> 
         <option value="1">Inactive</option> 
        </select> 
       </p> 
       <p>Termination Date: {{user.termination_date | date:'longDate'}}</p> 
       <p>Last Entry Date: {{user.last_entry | date:'longDate'}}</p> 
      </div> 
      <div class="modal-footer"> 
       <button class="btn btn-primary" ng-click="ok()">OK</button> 
       <button class="btn btn-warning" ng-click="cancel()">Cancel</button> 
      </div> 
     </script> 

     <div class="gridStyle" ng-grid="gridOptions"></div> 

    </div> 
</div> 

다음은 각도 앱입니다.

var app = angular.module('myApp', ['ngGrid','ui.bootstrap']); 

    app.controller('UsersCtrl', function($scope, $http, $modal) { 

    $scope.filterOptions = { 
     filterText: "", 
     useExternalFilter: false 
    }; 
    $scope.totalServerItems = 0; 
    $scope.pagingOptions = { 
     pageSizes: [20, 40, 60], 
     pageSize: 20, 
     currentPage: 1 
    }; 
    $scope.setPagingData = function(data, page, pageSize){ 
     var pagedData = data.slice((page - 1) * pageSize, page * pageSize); 
     $scope.userData = pagedData; 
     $scope.totalServerItems = data.length; 
     if (!$scope.$$phase) { 
      $scope.$apply(); 
     } 
    }; 
    $scope.getPagedDataAsync = function (pageSize, page, searchText) { 
     setTimeout(function() { 
      var data; 
      if (searchText) { 
       var ft = searchText.toLowerCase(); 
       $http.get('getUsers').success(function (largeLoad) {  
        data = largeLoad.filter(function(item) { 
         return JSON.stringify(item).toLowerCase().indexOf(ft) != -1; 
        }); 
        $scope.setPagingData(data,page,pageSize); 
       });    
      } else { 
       $http.get('getUsers').success(function (largeLoad) { 
        $scope.setPagingData(largeLoad,page,pageSize); 
       }); 
      } 
     }, 100); 
    }; 

    $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage); 

    $scope.$watch('pagingOptions', function (newVal, oldVal) { 
     if (newVal !== oldVal && newVal.currentPage !== oldVal.currentPage) { 
$scope.getPagedDataAsync($scope.pagingOptions.pageSize,$scope.pagingOptions.currentPage,$scope.filterOptions.filterText); 
     } 
    }, true); 
    $scope.$watch('filterOptions', function (newVal, oldVal) { 
     if (newVal !== oldVal) { 
      $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage,  
$scope.filterOptions.filterText); 
     } 
    }, true); 

    var editUserButtonTemplate = '<i class="fa fa-pencil" style="cursor:pointer;" ng-click="editUser(row.entity)"></i>'; 
    $scope.gridOptions = { 
     data: 'userData', 
     columnDefs: [ 
      {field: 'user_id', displayName: 'User ID', visible: false}, 
      {field: 'user_nm', displayName: 'Email'}, 
      {field: 'user_full_nm', displayName: 'Name'}, 
      {field: 'deleted', displayName: 'Active', width: 60, cellFilter: 'activeFilter'}, 
      {field: 'termination_date', displayName: 'Termination Date',cellFilter: 'date:\'longDate\''}, 
      {field: 'last_entry', displayName: 'Last Entry Date',cellFilter: 'date:\'longDate\''}, 
      {field: '', DisplayName: '', cellTemplate: editUserButtonTemplate, colFilterText: '', width:20} 
     ], 
     enablePaging: true, 
     showFooter: true, 
     showFilter: true, 
     enableRowSelection: false, 
     filterOptions: $scope.filterOptions, 
     totalServerItems:'totalServerItems', 
     pagingOptions: $scope.pagingOptions, 
     filterOptions: $scope.filterOptions 
    }; 


    /************ open the edit user modal *********************/ 
    $scope.editUser = function(value) { 

     var modalInstance = $modal.open({ 
      templateUrl: 'editUserModal.html', 
      // scope: $scope, 
      controller: 'editUserCtrl',   
      resolve: { 
      user: function() { 
       return value; 
      } 
      } 
     }); 

     modalInstance.result.then(function(selectedItem){ 
      $scope.selected = selectedItem; 
     }); 
    }; 
    }); 

    app.controller('editUserCtrl', function($scope, $http, $modalInstance, user) { 
    $scope.user = user; 
    $scope.ok = function() { 
     $modalInstance.close($scope.selected); 
     }; 
    $scope.cancel = function() { 
     $modalInstance.dismiss('cancel'); 
     }; 
    }); 

    // for the 'deleted' column, display 'Active' or 'Inactive' instead of 1 or 0 
    app.filter('activeFilter', function(){ 
    var types = ['Active', 'Inactive']; 
    return function(type){ 
     return types[type]; 
    }; 
}); 

Answer 1

그래서 자주 발생합니다. 질문을 게시하자마자 발견했습니다. 문제를 알려준

angular-ui-bootstrap modal not passing back result

.

$scope.ok = function() { 
     $modalInstance.close($scope.selected); 
     }; 

$ scope.selected가 $ scope.user로 변경되어 현재 예상대로 작동합니다.