angular.js:13920错误:[$ injector:unpr]未知提供者:$ uibModalInstanceProvider< - $ uibModalInstance< - empCtrl

时间:2016-10-25 12:01:26

标签: angularjs

我正在使用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>

有人可以帮助我弄清楚我的代码会发生什么。 干杯!!!

1 个答案:

答案 0 :(得分:0)

控制器上有一些奇怪的东西。对于模态和初始模态的位置,使用相同的控制器。您的代码应采用以下格式:

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