ui bootstrap modal Unbekannter Provider $ uibModalInstanceProvider

Question

Ich bin wieder mit meinem eckigen ui-Bootstrap modalen Fenster stecken.

Ich habe Header, die

<a ng-click="openLoginModal()">Zaloguj</a> 

und haben Controller namens headerCtrl.js enthält

app.controller('HeaderCtrl', ['$scope', '$uibModal', 'ApiService', function($scope, $uibModal, ApiService) { 
"use strict"; 
$scope.allGames = ApiService.GetGames(); 

$scope.openLoginModal = function(size, parentSelector) { 
    var parentElem = parentSelector ? 
     angular.element($document[0].querySelector('.modal-login' + parentSelector)) : undefined; 

    var modalInstance = $uibModal.open({ 
     animation: $scope.animationsEnabled, 
     ariaLabelledBy: 'modal-header', 
     ariaDescribedBy: 'modal-body', 
     templateUrl: 'app/views/modals/LoginModal.html', 
     controller: 'LoginModalCtrl', 
     controllerAs: '$ctrl', 
     backdropClass: "modal-backdrop", 
     size: size, 
     backdrop: true, 
     appendTo: parentElem, 

     resolve: { 
      items: function() { 
       return $scope.items; 
      } 
     } 
    }); 
}; 

}]); 

Nachdem ich "Zaloguj" klicken, die modal zeigt openLoginModal Methode beginnt, haben aber keinen Inhalt und in Cosole zeigt Fehler:

Error: [$injector:unpr] Unknown provider: $uibModalInstanceProvider <- $uibModalInstance <- LoginModalCtrl

LoginModalCtrl wird in headerCtrl induziert in Zeile 14:

controller: 'LoginModalCtrl', 

LoginModalCtrl.js Code:

app.controller('LoginModalCtrl', ['$scope', '$location', '$uibModalInstance', 'authenticationService', function($scope, $location, $uibModalInstance, authenticationService) { 
var $ctrl = this; 
$ctrl.modalInstance = null; 

$ctrl.animationsEnabled = true; 

$ctrl.cancel = function() { 
    $uibModalInstance.dismiss('cancel'); 
}; 

$ctrl.login = function() { 
    authenticationService.login($ctrl.loginData) 
     .then(function(data) { 

      $uibModalInstance.close(); 
      $location.url("/"); 

     }, function(error) { 

     }); 
}; 

}]); 

EDIT Modal Template-Code ist:

<div class="modal-login"> 
<script type="text/ng-template" id="loginModalContent.html"> 
    <div id="ModalLog" tabindex="-1" role="dialog" aria-labelledby="Zaloguj się"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" aria-label="Close" ng-click="$ctrl.cancel();"><span aria-hidden="true">&times;</span></button> 
       <h2 class="modal-title" id="myModalLabel">Zaloguj się do accTrader.com</h2> 
      </div> 
      <div class="modal-body"> 
       <form method="post" name="loginData"> 
        <label for="login">Login:</label> 
        <input type="text" placeholder="login123" ng-model="$ctrl.loginData.login" name="login" title="Wpisz swój login, użyj 6 do 20 znaków!" required /> 

        <label for="password">Hasło:</label> 
        <input type="password" placeholder="hasło" ng-model="$ctrl.loginData.password" name="password" title="Wpisz swój login, użyj 8 do 20 znaków!" required /> 

        <div class="row forget-valid"> 
         <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"> 
          <a href="/forget" title="zapomniałem hasła">Zapomniałem hasła</a> 
         </div> 
         <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 text-right"> 
          <span ng-show="(loginData.login.$touched && loginData.login.$invalid)||(loginData.password.$touched && loginData.password.$invalid)" class="error"> 
           Pola nie mogą zostać puste! 
          </span> 
         </div> 
        </div> 
       </form> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default close-button" ng-click="$ctrl.cancel()">Zamknij</button> 
       <button type="button" ng-disabled="loginData.login.$invalid || loginData.password.$invalid" class="btn btn-primary btn-md" ng-click="$ctrl.login()">Zaloguj się</button> 
      </div> 
     </div> 
    </div> 
</script> 

Hilfe

Answer 1

Sie müssen $uibModal als Parameter in die Controller-Funktion einfügen, genau wie Sie es für $scope getan haben.