使用两个模态时出错:[$ injector:unpr]未知提供者:$ modalInstanceProvider< - $ modalInstance

时间:2016-01-28 06:06:03

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

我真的觉得很难解决上述错误。 我的项目中有两个模态。其中一种模式工作正常,另一种模式则不然。我已经在控制器中注入了$ 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>

ModalController:AuthenticationController

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

Modal模板: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>

ModalController:SearchController

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

}
}]);

我在SearchController中获取未知的注入器$ modalInstance。 提前谢谢。

1 个答案:

答案 0 :(得分:0)

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

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

<强>模态

  • 更改:$ umbModal的模态。
  • 更改:$ modalInstance for $ uibModalInstance。
  • 更改:uib-modal-transclude的模态转换