使用两种模式时出错：[$injector:unpr] 未知提供者：$modalInstanceProvider <- $modalInstance答案

【问题标题】：Error while using two modals: [$injector:unpr] Unknown provider: $modalInstanceProvider <- $modalInstance使用两种模式时出错：[$injector:unpr] 未知提供者：$modalInstanceProvider <- $modalInstance
【发布时间】：2016-01-28 06:06:03
【问题描述】：

我真的觉得解决上述错误非常困难。我的项目中有两个模态。其中一种模式工作正常，而另一种模式则不然。我在创建第一个模态的控制器中注入了 $modal 作为依赖项，并且在 modalController 中注入了 $modalInstance 作为依赖项，它对我来说很好。我尝试使用相同的步骤再创建一个模式，但遇到了未知提供者 $modalInstance 错误。任何答案将不胜感激。

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

控制器：

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>

模态控制器：身份验证控制器

    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>

第二个模态代码

控制器

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>

模态控制器：搜索控制器

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

}
}]);

我在 SearchController 中得到了未知的注入器 $modalInstance。提前致谢。

【问题讨论】：

发布你的模块声明

标签： javascript angularjs modal-dialog angular-ui-bootstrap bootstrap-modal

【解决方案1】：

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

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

模态

更改：将 $modal 改为 $uibModal。
更改：$modalInstance 为 $uibModalInstance。
更改：uib-modal-transclude 的modal-transclude

【讨论】：