使用angular-bootstrap时$ injector错误（$ modalInstanceProvider

i've been playing around with this bug but i cant seem to figure it out. The problem started when i pushed the angular-bootstrap modals i had added to the prod server. The original error was this "AngularJS Error: Unknown provider: aProvider <- a" im pretty sure i was getting that error because my files werent minifying correctly. So i went through my controllers and found that i wasn't $injecting $modal instance into my controllers and thats when i ran into this problem. Whenver i inject $modalInstance into my controller in the minified format i get this error. I am not using the format angular-bootstrap suggests because i have a lot going on and many controllers on the site im building so i combined everything into one controller instead of several functions.

我一直在玩这个bug，但我似乎无法弄明白。当我按下我添加到prod服务器的angular-bootstrap模态时，问题就出现了。最初的错误是“AngularJS错误：未知的提供者：aProvider < - a”我很确定我收到了这个错误，因为我的文件没有正确缩小。所以我通过我的控制器，发现我不是$ $我注入$ modal实例到我的控制器，那当我遇到这个问题。当我以缩小的格式将$ modalInstance注入我的控制器时，我得到了这个错误。我没有使用格式angular-bootstrap建议，因为我有很多正在进行的网站上的许多控制器，所以我将所有内容组合到一个控制器而不是几个功能。

My Controller:

我的控制器：

.controller('CreateGroupCtrl', ['$scope', '$http', '$window', '$cookies', '$modal', '$log', 'FeedService', '$modalInstance', 
function CreateGroupCtrl($scope, $http, $window, $cookies, $modal, $log, $modalInstance, FeedService) {
$scope.createGroupCall = function createGroupCall(teacher, name) {
    if(teacher != null && name != null) {
            FeedService.createGroupCall($cookies.token, $window.sessionStorage.user, teacher, name).success(function(data) {
            console.log('GroupCreated');
        }).error (function(status,data,token) {
            console.log(status);
            console.log(data);
        });
    } else {
        alert("Error!");
    }

}

/***********ANGULAR-UI MODAL CODE**********/
$scope.open = function (size) {
    var modalInstance = $modal.open({
        templateUrl: 'CreateGroupContent.html',
        controller: CreateGroupCtrl,
        size: size
});

modalInstance.result.then(function (selectedItem) {
    $scope.selected = selectedItem;
}, function () {
    $log.info('Modal dismissed at: ' + new Date());
    });
};

$scope.ok = function () {
    $modalInstance.close();
};

$scope.cancel = function () {
    $modalInstance.dismiss('cancel');
};

}]);

My Template:

我的模板：

<button ng-controller="CreateGroupCtrl" ng-click="open()" type="button" id="creategroup" class="btn ns-btn">
        <img class="ns-add" src="images/createGroup.png">
        <p class="create">Create Group</p>
</button>

<div>
    <script type="text/ng-template" id="CreateGroupContent.html">
        <div class="modal-header">
                <h2 class="modal-title ns-modal-title">Create A Group</h2>
                <button class="ns-modal-close" ng-click="cancel()"><img src="images/xCancel.png"></button>
            </div>
            <div class="modal-body">
                <form class="form-signin" role="form">
                    <input type="text" class="form-control ns-modal-form" placeholder="Teacher" ng-model="create.teacher" required autofocus>
                    <input type="text" class="form-control ns-modal-form" placeholder="Group Name" ng-model="create.name" required>

                </form>
            </div>
            <div class="modal-footer">
                <button class="btn ns-modal-add ns-btn" ng-click="createGroupCall(create.teacher, create.name); ok();" type="submit">Create</button>
            </div>
        </div>
    </script>
</div>

2 个解决方案

#1

At first, you need to inject all in its order.

首先，您需要按顺序注入所有内容。

Also, you should inject $modal into the controller in which you would like to create your modal view. And the $modalInstance can be injected ONLY into the controller which is used for this $modal window. In your case you use the same controller, so you couldn't inject $modalInstance

此外，您应该将$ modal注入您想要创建模态视图的控制器中。并且$ modalInstance只能注入到用于此$ modal窗口的控制器中。在您的情况下，您使用相同的控制器，因此您无法注入$ modalInstance

Demo: http://plnkr.co/edit/khzNQ0?p=preview

Also, in your case (when you use only 1 controller) - you can pass as object field scope which will be used as parent of $scope for your modal view. By default it is $rootScope, but you can type:

此外，在您的情况下（当您只使用1个控制器时） - 您可以作为对象字段范围传递，该范围将用作模式视图的$ scope的父级。默认情况下它是$ rootScope，但你可以输入：

$scope.open = function (size) {
    var modalInstance = $modal.open({
        templateUrl: 'CreateGroupContent.html',
        controller: CreateGroupCtrl,
        size: size,
        scope: $scope
});

So now your functions ok() and cancel() will be available in your modal view and modal scope.

所以现在你的函数ok（）和cancel（）将在你的模态视图和模态范围中可用。

#2

Looks like your FeedService and $modalInstance are mixed up. They need to be in the same order.

看起来你的FeedService和$ modalInstance混在了一起。它们需要处于相同的顺序。