輸入數據後退出模式

Question

當我從表單提交數據並點擊提交按鈕後，我希望模式關閉。我應該在$ dtate.go中放置什麼，以便實現我想要的結果？

模態控制器

.controller('DietController', ['$scope', 'Diet', '$state', function($scope, Diet, $state) { 
    $scope.diets = []; 

    $scope.submitForm = function() { 
     Diet 
     .upsert({ 
      date: $scope.diet.date, 
      food: $scope.diet.food 
     }) 
     .$promise 
     .then(function() { 
      $state.go('diet'); 
     }); 
    }; 
    }]) 

HTML模式

<div class="modal fade" id="myModalNorm" tabindex="-1" role="dialog" 
aria-labelledby="myModalLabel" aria-hidden="true"> 
<div class="modal-dialog"> 
    <div class="modal-content"> 

     <!-- Modal Body --> 
     <div class="modal-body"> 

      <form role="form"> 
       <div class="form-group"> 
       <label>Date</label> 
        <input class="form-control" type="date" ng-model="diet.date"> 
       </div> 
       <div class="form-group"> 
       <label>Food Description</label> 
        <textarea type="text" class="form-control" ng-model="diet.food" placeholder="Enter food"></textarea> 
       </div> 

     <!-- Modal Footer --> 
     <div> 
      <button type="button" class="btn btn-primary" ng-click="submitForm()"> 
       Submit 
      </button> 
     </div> 
     </form> 
    </div> 
</div> 

Answer 1

如果您使用的bootstrap modal，包括$uibModalInstance並調用其close方法：

controller('DietController', ['$scope', 'Diet', '$state', '$uibModalInstance', function($scope, Diet, $state, $uibModalInstance) { 
    $scope.diets = []; 

    $scope.submitForm = function() { 
     Diet 
     .upsert({ 
      date: $scope.diet.date, 
      food: $scope.diet.food 
     }) 
     .$promise 
     .then(function() { 
      $uibModalInstance.close(); 
     }); 
    }; 
    }]) 

Answer 2

試試這個：

.then(function() { 
    $('#myModalNorm').modal('hide'); 
});