AngularJS - Schließen des Modales

Question

Ich möchte eine Schließen-Schaltfläche, das x in der oberen rechten Ecke, und klicken Sie außerhalb der Modalität, um das modale Fenster zu schließen.

Hier habe ich die Taste, um die modale zu öffnen: (rollup.html)

 <li style="float: right;"> 
      <button id="myBtn" ng-click="printDivModal('rollup-tab', test)">Modal Test</button> 
     </li> 

Dies eröffnet die modale: (rollup.js)

app.controller('Rollup', function($scope, $rootScope, $http, $uibModal, headersvc, locFiltersvc) { 

..... 

$scope.printDivModal = function(divName,test) { 
      console.log('opening pop up'); 
      var ModalInstance = $uibModal.open({ 
       scope: $scope, 
       animation: $scope.animationsEnabled, 
       templateUrl: 'app/views/modals/stackedModal.html', 
       size: 'xl', 
       controller: 'PrintViewCtrl', 
       backdrop : 'static', 

       resolve: { 
        test: function() { 

         return test; 
        } 
        } 


      }); 

     } 
}); 

Und hier ist der Inhalt des modal selbst: (stackedModal.html)

<div class="modal-footer"> 
     <button ng-click="closeModal()" type="button" class="btn btn-default">Close</button> 
     <!-- data-dismiss="modal" --> 
    </div> 

Hier habe ich den Umfang schrieb die modal zu schließen, aber es scheint nicht zu Arbeit. Wenn ich die Schließen-Schaltfläche klicken, erscheint die Warnung, aber die Aktion nicht ausgeführt wird .: (stackedModal.js)

app.controller('PrintViewCtrl', rollUpCtrl); 
rollUpCtrl.$inject = ['$scope', '$rootScope', '$http', '$uibModal', 'headersvc','locFiltersvc'] 

function rollUpCtrl($scope, $rootScope, $http, $uibModal, $modalInstance, headersvc, locFiltersvc) { 

..... 

    $scope.closeModal = function() { 
     alert("close the modal!"); 
      $modalInstance.close(); 
      }; 
} 

Jede Hilfe sehr geschätzt wird.

EDIT FÜR RESOLVE (rollup.js)

app.controller('PrintViewCtrl', function($scope, $http, $rootScope, $uibModalInstance) { 
    $scope.test = function() { 
      $scope.regionName; 
      $scope.groupName; 
      $scope.mcName; 
      $scope.districtNumber; 
      $scope.routeNumber; 
      $scope.weekEndDate; 

    }; 

}); 

Dies ist die Daten-I aus (route.html) ziehen wollen

 <div class="row"> 
      <div class="col-xs-6 col-md-4"> 
       <label>Region:</label> 
       <span>{{regionName}}</span> 
      </div> 
      <div class="col-xs-6 col-md-4"> 
       <label>Group:</label> 
       <span>{{groupName}}</span> 
      </div> 
      <div class="col-xs-6 col-md-4"> 
       <label>MC:</label> 
       <span>{{mcName}}</span> 
      </div> 
      <div class="col-xs-6 col-md-4"> 
       <label>District #:</label> 
       <span>{{districtNumber}}</span> 
      </div> 
      <div class="col-xs-6 col-md-4"> 
       <label>Route #:</label> 
       <span>{{routeNumber}}</span> 
      </div> 
      <div class="col-xs-6 col-md-4"> 
       <label>Week Ending Date:</label> 
       <span>{{weekEndDate}}</span> 
      </div> 
      <div class="col-xs-6 col-md-4"> 
       <label>RSR:</label> 
       <span style="text-transform: capitalize;">{{rsrName}}</span> 
      </div> 
     </div> 

Answer 1

Zuerst die neueste Version der Bibliothek injiziert $uibModalInstance nicht $modalInstance, also überprüfen Sie das. Zusätzlich werden Injizieren Sie nicht die $uibModalInstance in Ihrer Controller-Definition:

rollUpCtrl.$inject = ['$scope', '$rootScope', '$http', '$uibModal', '$uibModalInstance', 'headersvc','locFiltersvc']; 
function rollUpCtrl($scope, $rootScope, $http, $uibModal, $uibModalInstance, headersvc, locFiltersvc) { 

Zweitens wird verhindert, dass backdrop: static die modale vor der Schließung, indem Sie auf dem Hintergrund klicken. Versuchen Sie stattdessen backdrop: true.