angular-ui-bootstrap 报错 $modalInstance Provider

最新推荐文章于 2020-12-20 16:00:20 发布

原创最新推荐文章于 2020-12-20 16:00:20 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angular ui model

angular js 专栏收录该内容

1 篇文章

订阅专栏

在使用Angular UI Bootstrap时遇到了$modalInstance未知提供者的错误。该错误源于在较新版本中$modalInstance已被弃用，需替换为$uibModalInstance。解决方案是将$modal替换为$uibModal以修复问题。

angular.js:14961 Error: [$injector:unpr] Unknown provider: $modalInstance Provider <- $modalInstance
https://errors.angularjs.org/1.6.10/$injector/unpr?p0=%24modalInstanceProvider%20%3C-%20%24modalInstance
at angular.js:125
at angular.js:4898
at Object.getService [as get] (angular.js:5058)
at angular.js:4903
at getService (angular.js:5058)
at injectionArgs (angular.js:5083)
at Object.invoke (angular.js:5109)
at $controllerInit (angular.js:11139)
at resolveSuccess (ui-bootstrap-tpls.js:4552)
at processQueue (angular.js:17330) "Possibly unhandled rejection: {}"

angular-ui-bootstrap 报错原因为

$modal 已经在高版本中不在支持，需要修改为 $uibModal

$modalInstance已经在高版本中不在支持，需要修改为 $uibModalInstance。

个人测试如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.angularjs.org/1.6.10/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!--<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">-->
    <!--<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>-->
    <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.js"></script>-->
    <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap.js"></script>-->
</head>
<body>
    <div ng-app="ModalDemo">
        <script type="text/ng-template" id="myModalContent.html">
            <div class="modal-header">
                <h3>I'm a modal!</h3>
            </div>
            <div class="modal-body">
                <ul>
                    <li ng-repeat="item in items">
                        <a ng-click="selected.item = item">{{ item }}</a>
                    </li>
                </ul>
                Selected: <b>{{ selected.item }}</b>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" ng-click="ok()">OK</button>
                <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
            </div>
        </script>
      <div ng-controller="ModalDemoCtrl111">
          <button class="btn" ng-click="open()">Open me!</button>
      </div>
</div>
    <script>
    var ModalDemo = angular.module('ModalDemo', ['ui.bootstrap']);

    ModalDemo.controller("ModalDemoCtrl111", function ($scope, $uibModal, $log) {
        $scope.items = ['中文', '汉文', '英文'];
        $scope.open = function () {
            var modalInstance111 = $uibModal.open({
                templateUrl: 'myModalContent.html',
                controller: ModalInstanceCtrl,
                resolve: {
                    items: function () {
                        return $scope.items;
                    }
                }
            });
            modalInstance111.opened.then(function(){//模态窗口打开之后执行的函数
                console.log('modal is opened');
            });
            modalInstance111.result.then(function (result) {
                console.log(result);
            }, function (reason) {
                console.log(reason);//点击空白区域，总会输出backdrop click，点击取消，则会暑促cancel
                $log.info('Modal dismissed at: ' + new Date());
            });
        };
    });
    var ModalInstanceCtrl = function ($scope, $uibModalInstance, items) {
        $scope.items = items;
        $scope.selected = {
            item: $scope.items[0]
        };
        $scope.ok = function () {
            $uibModalInstance.close($scope.selected);
        };
        $scope.cancel = function () {
            $uibModalInstance.dismiss('cancel');
        };
    };
</script>
</body>
</html>