angular.js: 13920 Fehler: [$ injector: unpr] Unbekannter Provider: $ uibModalInstanceProvider <- $ uibModalInstance <- empCtrl

Question

Ich verwende ein UI-Bootstrap-Modal, um ein Formular zu senden, mein Modal wird geladen, aber mein "Cancel "Button funktioniert nicht richtig und ich erhalte die oben genannte Fehlermeldung.

mein app.js

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

myApp.controller('empCtrl', [ 
    '$scope', '$http', '$uibModal', '$uibModalInstance', function ($scope, $http, $uibModal, $uibModalInstance) { 


     $scope.employees = ""; 


     $http.get("/Home/GetEmployees").success(function(result) { 
      $scope.employees = result; 
     }).error(function(result) { 
      alert("error"); 
     }); 


     $scope.saveData = function(employee) { 
      $http.post("/Home/AddEmployee", { employee: employee }).sucess(function(result) { 
       alert(result); 

      }).error(function(result) { 
       alert(result); 
      }); 
     } 

     $scope.showCreateEmployeeForm = function() { 
      $uibModal.open(
      { 
       templateUrl: "app/employeeTemplate/employeeAdd.html", 
       controller: 'empCtrl' 

      }); 

      $uibModalInstance.cancel(); 


     } 

     $scope.cancelForm= function() { 
      $uibModalInstance.dismiss(); 
     } 


    } 
]); 

mein modal in html

<div class="container" ng-controller="empCtrl"> 
    <div class="modal-header"> 
     <h1>Create Employee</h1> 
    </div> 
    <div class="modal-body"> 
     <div class="form-group"> 
      <div class="col-lg-4 input-group"> 
       <label>Name</label> 
      </div> 
      <div class="col-lg-6"> 
       <input type="text" ng-model="employee.name" /> 
      </div> 
     </div> 
     <div class="form-group"> 
      <div class="col-lg-4 input-group"> 
       <label>Address</label> 
      </div> 
      <div class="col-lg-6"> 
       <input type="text" ng-model="employee.address" /> 
      </div> 
     </div> 

    </div> 
    <div class="modal-footer"> 
     <div class="col-sm-offset-3 col-sm-9" > 
      <input type="submit" value="Save" name="Save" ng-click="saveData(employee)" /> 
      <input type="submit" value="Cancel" class="btn btn-success" ng-click="cancelForm()" /> 
     </div> 
    </div> 
</div> 

kann mir bitte jemand helfen, herauszufinden, was mit meinem Code vor sich geht. Prost !!!

Answer 1

Es ist etwas seltsam auf dem Controller. Für das Modal und für den Ort, an dem Sie das Modal initiieren, verwenden Sie den gleichen Controller. Der Code sollte in diesem Format sein:

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

myApp.controller('empCtrl', [ 
    '$scope', '$http', '$uibModal', function ($scope, $http, $uibModal) { 

    $scope.employees = ""; 

    $http.get("/Home/GetEmployees").success(function(result) { 
     $scope.employees = result; 
    }).error(function(result) { 
     alert("error"); 
    }); 

    $scope.showCreateEmployeeForm = function() { 
     $uibModal.open(
     { 
      templateUrl: "app/employeeTemplate/employeeAdd.html", 
      controller: function($scope, $http, $uibModalInstance){ 
       $scope.saveData = function(employee) { 
        $http.post("/Home/AddEmployee", { employee: employee }).sucess(function(result) { 
         alert(result); 

        }).error(function(result) { 
         alert(result); 
        }); 
       } 
       $scope.cancelForm= function() { 
        $uibModalInstance.dismiss(); 
       } 
      } 
      resolve: { 
       return $scope.employees; 
      } 
     }); 
    } 
} 
]);