javascript - 使用两个模态时出错 : [$injector:unpr] Unknown provider: $modalInstanceProvider <- $modalInstance

Question

我真的觉得上面的错误很难解决。我的项目中有两个模式。其中一个模态工作正常，而另一个模态则不然。我已将 $modal 作为依赖项注入(inject)到 Controller 中，在该 Controller 中创建了第一个模态，并将 $modalInstance 作为依赖项注入(inject)到 modalController 中，它对我来说效果很好。我尝试使用相同的步骤创建另一个模态，但遇到了未知提供程序 $modalInstance 错误。任何答案将不胜感激。

这是我的第一个模式的代码。

Controller :

angular.module('menu').controller('HeaderNavbarController', ['$scope', '$modal', '$log', 
function($scope, $modal, $log) {
 $scope.signin = function() {
        console.log('in signin');
        var modalnstance = $modal.open({

            templateUrl: '/modules/users/client/views/authentication/signin.client.view.html',
            controller: 'AuthenticationController',
            size: 'lg',
            resolve: {
                items: function() {
                    return $scope.items;
                }
            }
        });
        modalnstance.result.then(function(selectedItem) {
            $scope.selected = selectedItem;
            console.log('$scope.selected', $scope.selected);
        }, function() {
            $log.info('Modal dismissed at: ' + new Date());
        });
    };}]);

查看:

<div class="header-container top-header" ng-controller="HeaderNavbarController">
<li><a ng-click="signin()">SIGN IN</a></li>
</div>

ModalController:身份验证 Controller

    angular.module('users').controller('AuthenticationController', ['$scope', '$modalInstance',
        function($scope, $modalInstance) { 
        $scope.cancel=function(){
            $modalInstance.close();
          }
}
]);

模态模板:signin.client.view

<div>
<button ng-click="cancel()">cancel</button>
</div>

第二个模态的代码

Controller

angular.module('menu').controller('ScripsController', ['$scope', '$modal', '$log', 
    function($scope, $modal, $log) {
     $scope.focusInput = function() {
            console.log('in signin');
            var modalnstance = $modal.open({

                templateUrl: '/modules/menu/client/views/search.popup.html',
                controller: 'SearchController',
                size: 'lg',
                resolve: {
                    items: function() {
                        return $scope.items;
                    }
                }
            });
            modalnstance.result.then(function(selectedItem) {
                $scope.selected = selectedItem;
                console.log('$scope.selected', $scope.selected);
            }, function() {
                $log.info('Modal dismissed at: ' + new Date());
            });
        };}]);

模态视图(HTML):search.popup.html

<div class="search-popup">
<button ng-click="closeSearch()">cancel</button>
</div>

ModalController:搜索 Controller

angular.module('menu').controller('SearchController', ['$scope', '$modalInstance',
    function($scope, $modalInstance) {
      $scope.closeSearch=function(){
         $modalInstance.close();
}

}
}]);

我在 SearchController 中收到未知的注入(inject)器 $modalInstance。提前致谢。

Answer 1

这很可能意味着您最近将 ui-bootstrap 从 0.14 之前的版本升级到 0.14 之后的版本。

https://github.com/angular-ui/bootstrap/wiki/Migration-guide-for-prefixes#modal

模态

• 更改:$modal 为 $uibModal。
• 更改:$modalInstance 为 $uibModalInstance。
• 更改:将 modal-transclude 替换为 uib-modal-transclude