角度：モーダルからの投稿要求を提出し、メインページをリフレッシュ

Question

私はいくつかのデータ（$http.getがフェッチされています）を持つメインコントローラを持っていて、1つのアイテムをクリックすると詳細が表示されます。

モーダルでは、データを変更するボタン（$http.postによって送信）があり、モーダルを閉じ、親コントローラにデータを更新するように指示する必要があります。これは、モーダルのイベントによって変更されているためです。

Answer 1

HTML

<!--MODAL WINDOW for item details --> 
      <script type="text/ng-template" id="itemModalContent.html"> 
       <div class="modal-dialog ng-hide="hidden"> 
        <div class="modal-content"> 
         <div class="modal-header"> 
          <button type="button" class="cancel right button" data-dismiss="modal" aria-hidden="true" ng-click="cancel()"><i class="fa fa-close"></i></button> 
          <span class="item-name">{{item.name}}</span> 
         </div> 
         <div class="modal-body"> 
          <p class="description">{{item.description}}</p> 
          <input type="hidden" ng-model="item.uniqueid" id="uniqueid" value="{{item.uniqueid}}" name="uniqueid"/> 
          <p class="response"> {{PostDataResponse}}</p> 
          <p class="error"> {{ResponseDetails}}</p> 
         </div> 
         <div class="modal-footer"> 
          <button type="button" class="button cancel btn-default" data-dismiss="modal" ng-click="cancel()">Cancel</button> 
          <button type="button" class="button ok btn-primary" ng-click="confirm()">Submit</button> 
         </div> 
        </div> 
       </div> 
      </script> 

角度

/* main controller - items */ 
     myApp.controller('itemsCtrl', function ($scope, $rootScope, $http, $uibModal) { 
      //wrap $http.get request in a function 
      $scope.loadMyData = function() { 
       url = '<your_server>'; 

       $http.get(url).then(function (response) { 
        $scope.items = response.data; 
        $scope.showModal = false; 
        $scope.open = function (item) { 
         $('.overlay').show(); 
         var modalInstance = $uibModal.open({ 
          controller: "itemsModalInstanceCtrl", 
          templateUrl: 'itemModalContent.html', 
          resolve: { 
           item: function() { 
            return item; 
           } 
          } 
         }); 
        }; 
       }); 
      } 
      //initial load 
      $scope.loadMyData(); 

      //event listener for refresh_items event 
      $rootScope.$on('refresh_items', function (event, data) { 
       console.log(data); 
       $scope.loadMyData(); 
      }); 
     }); 

/* modal instance - item */ 
myApp.controller('itemsModalInstanceCtrl', function ($http, $scope, $timeout, $uibModalInstance, item) { 
    $scope.item = item; 

    $scope.cancel = function() { 
     $uibModalInstance.dismiss(); 
     $('.overlay').hide(); 
    }; 

    updateUrl = '<your_webservice_url>'; 

    $scope.confirm = function() { 
     var myitemid = $scope.item.uniqueid; 

     // use $.param jQuery function to serialize data from JSON 
     var data = $.param({ 
      uniqueid: myitemid 
     }); 
     var config = { 
      headers: { 
       'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;' 
      } 
     } 

     $http.post(updateUrl, data, config) 
      .success(function (data, status, headers, config) { 

       $scope.PostDataResponse = "You have successfully submitted your data"; 
      }) 
      .error(function (data, status, header, config) { 
       $('.response').addClass('error'); 
       $scope.ResponseDetails = "data: " + data + 
         "<br />status: " + status + 
         "<br />headers: " + header + 
         "<br />config: " + config; 
      }); 
     $timeout(function() { 
      $uibModalInstance.close({}); 
      $('.overlay').hide(); 
      //tell parent controller to refresh the data 
      $scope.$emit('refresh_items', data); 
     }, 3000); 
    } 

});