使用两种模式时出错:[$injector:unpr] 未知提供程序:$modalInstanceProvider <-

Error while using two modals: [$injector:unpr] Unknown provider: $modalInstanceProvider <- $modalInstance

本文关键字:程序 modalInstanceProvider 未知 unpr 模式 两种 出错 injector      更新时间:2023-09-26

我真的发现很难解决上述错误。我的项目中有两种模式。其中一个模态工作正常,另一个模态则不然。我已经在创建第一个模态的控制器中注入了$modal作为依赖项,并且我已经$modalInstance作为依赖项注入到modalController中,它对我来说工作正常。我尝试使用相同的步骤再创建一个模态,但遇到了未知的提供程序$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();
          }
}
]);

模态模板:登录.客户端.视图

<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):搜索.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();
}
}
}]);

我在搜索控制器中收到未知的注射器$modalInstance。提前谢谢。

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

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

模 态

  • 变化:$modal$uibModal。
  • 变化:$modalInstance$uibModalInstance。
  • 更改:modal-transclude for uib-modal-transclude