CODEWITHSUNDEEP
javascripttwitter-bootstrapangularjs
guiomie
guiomie

Reputation: 5148

angularjs twitter bootstrap modal not showing

When I click on the defined button below, the modal box doesn't show. If I use the chrome developper tool, I see that my div "modalDisplay" is populated with my modalDisplay.html content, but when I click the button, nothing happens, no error, just nothing. I am using angularjs with the angularjs bootstrap plugin

In my partial view I have the following: 

<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>

In my 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…</p>
        <div></div>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn" data-dismiss="modal">Cancel</a>
    </div>
</div>

Upvotes: 2

Views: 7140

Answers (2)

sarath2
sarath2

Reputation: 81

Use https://github.com/sarath2/ngEkathuwa

It support Bootstrap 3 and 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'
     });

Upvotes: 2

massintha
massintha

Reputation: 214

It's normal, you should use directive for this components.

You can use angular-strap directives http://mgcrea.github.io/angular-strap/#/modal or angular-ui http://angular-ui.github.io/bootstrap/#/modal

Upvotes: 6

Related Questions