Angular Bootstrap UI 模式未显示答案

【问题标题】：Angular Bootstrap UI modal not showingAngular Bootstrap UI 模式未显示
【发布时间】：2014-07-11 02:57:58
【问题描述】：

我正在尝试使用 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>

控制器：

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'});  
    };
});

上面的代码有问题吗？

【问题讨论】：

DevTools 控制台有输出吗？
代码看起来不错。第一次使用 angular-ui ？通过包含 JS 文件很好地安装了 lib 吗？哪个仓库？
从这里手动下载，angular-ui.github.io/bootstrap

标签： javascript angularjs twitter-bootstrap angular-ui-bootstrap

【解决方案1】：

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

【讨论】：

【解决方案2】：

我遇到了同样的问题并使用：

windowClass : 'show'

在 $modal.open 函数中成功了。

【讨论】：

【解决方案3】：

AngularUI modal 的文档说

windowClass - 要添加到模态窗口模板的附加 CSS 类

您使用的是哪个“模态”类。这个类是你在某个地方定义的吗？应该不是问题，但请尝试删除它。

【讨论】：