angular.js : 13920 오류 : [$ injector : unpr] 알 수없는 공급자 : $ uibModalInstanceProvider <- $ uibModalInstance <- empCtrl

Question

ui-bootstrap 모달을 사용하여 양식을 제출할 때 모달이 잘로드되지만 "취소 "버튼이 제대로 작동하지 않고 위에서 언급 한 오류 메시지가 나타납니다. 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> 

에서

내 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(); 
     } 


    } 
]); 

내 모달

누군가 내 코드에 무슨 일이 일어나고 있는지 알아 내기 위해 나를 도와주세요 수 있습니다. 환호성 !!!

Answer 1

컨트롤러에 이상한 점이 있습니다. 모달을 초기화하는 장소와 모달의 경우 동일한 컨트롤러를 사용합니다.

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; 
      } 
     }); 
    } 
} 
]);