javascript - 使用 angular-bootstrap 时 $injector 错误($modalInstanceProvider <- $modalInstance)

Question

我一直在研究这个错误，但我似乎无法弄清楚。当我将添加到产品服务器的 Angular 引导模型推送时，问题就开始了。原来的错误是这样的:

"AngularJS Error: Unknown provider: aProvider <- a"

我很确定我收到了那个错误，因为我的文件没有正确缩小。所以我检查了我的 Controller ，发现我没有将 $injecting $modal 实例放入我的 Controller 中，这就是我遇到这个问题的时候。

每当我以缩小格式将 $modalInstance 注入(inject)我的 Controller 时，我都会收到此错误。我没有使用 angular-bootstrap 建议的格式，因为我有很多事情要做，而且我正在构建的网站上有很多 Controller ，所以我将所有东西组合到一个 Controller 而不是几个功能中。

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

}]);

我的模板:

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

Answer 1

首先，您需要按顺序注入(inject)。

此外，您应该将 $modal 注入(inject)到您要在其中创建模态视图的 Controller 中。 $modalInstance 可以ONLY 注入(inject)到用于此 $modal 窗口的 Controller 中。在你的情况下，你使用相同的 Controller ，所以你不能注入(inject) $modalInstance

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

此外，在您的情况下(当您仅使用 1 个 Controller 时)- 您可以作为对象字段 scope 传递，它将用作模态的 $scope 的父级看法。默认情况下它是 $rootScope，但您可以键入:

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

现在您的函数 ok() 和 cancel() 将在您的模态视图和模态范围内可用。