javascript - Angular Bootstrap UI 模态未显示

Question

我正在尝试使用 angular ui bootstrap 中的模态，但它没有显示，尽管在执行显示模态的代码时窗口是模糊的，

模态代码是:

<script type="text/ng-template" id="test.html">
    <div class="modal-header">
        <h3>XXXX</h3>
    </div>

    <div class="modal-body">
        <p>XXXX</p>
    </div>

    <div class="modal-footer">
        xxxxxx
    </div>
</script>

显示模态的按钮:

<div class="container-fluid" ng-controller="MainController">
    <button ng-click="showModal()" ></button>
</div>

Controller :

var app = angular.module('angularjs-starter', ['ui.bootstrap']);

app.config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/', {
        templateUrl: '/home.html'
    });
}]);

app.controller('MainController', function($scope, $rootScope, $modal) {
    $scope.showModal = function() {
        $modal.open({templateUrl:'test.html', backdrop: true,windowClass: 'modal'});  
    };
});

上面的代码有没有问题？

Answer 1

我的问题是我包含了两个 js 文件(ui-bootstrap.min.js 和 ui-bootstrap-tpls.min.js)，而我应该只加载'ui-bootstrap-tpls.min.js ' 。在那之后，它就像一个魅力。