angular.js：13920錯誤：[$ injector：unpr]未知提供者：$ uibModalInstanceProvider < - $ uibModalInstance < - empCtrl

Question

我正在使用ui-bootstrap模式提交表單，我的模式加載正常，但我的「取消「按鈕無法正常工作，我收到上述錯誤信息。

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


    } 
]); 

我在模態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> 

有人可以請幫我弄清楚發生了什麼事情與我的代碼。 乾杯！

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