silent9 silent9 - 1 month ago 10
AngularJS Question

angular.js:13920 Error: [$injector:unpr] Unknown provider: $uibModalInstanceProvider <- $uibModalInstance <- empCtrl

I am using a ui-bootstrap modal to submit a form, my modal is loading fine but my "Cancel" button doesn't work properly and i am getting the above mentioned error message.

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


}
]);


my 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>


can someone please help me to figure out what's going on with my code.
Cheers!!!

Answer

There is something weird on the controller. For the modal and for place where you init the modal you use the same controller. Your code should be in this format:

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