2

当我单击下面定义的按钮时，模式框不显示。如果我使用 chrome 开发工具，我会看到我的 div“modalDisplay”填充了我的 modalDisplay.html 内容，但是当我单击按钮时，什么也没有发生，没有错误，什么也没有。我正在使用带有 angularjs 引导插件的 angularjs

在我的部分观点中，我有以下几点：

<div id="modalDisplay" class="modal hide fade" ng-include="'./app/templates/modalDisplay.html'"></div>

<button class="btn btn-primary" href="#modalDisplay" data-toggle="modal" ng-show="displayType=='Customer'">
Show Modal
</button>

在我的 modalDisplay.html

<div ng-controller="mODALCtrl" class="ng-scope">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>My modal</h3>
    </div>
    <div class="modal-body">
        <p>One fine body…&lt;/p>
        <div></div>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn" data-dismiss="modal">Cancel</a>
    </div>
</div>
4

2 回答 2

6

这很正常，您应该为此组件使用指令。

您可以使用 angular-strap 指令http://mgcrea.github.io/angular-strap/#/modal或 angular-ui http://angular-ui.github.io/bootstrap/#/modal

于 2013-08-07T18:40:38.120 回答
2

使用https://github.com/sarath2/ngEkathuwa

它支持 Bootstrap 3 和 angular 1.2

eg1: stylish with 80% width

    $ekathuwa.modal({
        id:"yourModalId",
        contentStyle:"heigth:400px;background-color:#1b78f7;",
        contentCustomSize:80
     });

eg2: Stylish with pre-defined sizes /df= Bootstrap's default modal width/
sm= small width/
md= medium width/
lg= large width/
fl= full width

    $ekathuwa.modal({
        id:"yourModalId",
        contentStyle:"400px;background-color:#1b78f7;",
        contentPreSize:'lg'
     });
于 2013-09-01T04:53:22.993 回答