Angularjs bootstrap dropdown not working

前端未结

关注

 9  1941

时光取名叫无心

Am bit new to angularjs and bootstrap.

Am trying to add a simple dropdown. But it is not working.

Tried out the suggestion @ Bootstrap 3 simple dropdown not

相关标签:

9条回答

逝去的感伤

2021-01-01 11:26

data-toggle="dropdown" should be removed. I guess it creates some conflict with ui.bootstrap

<li class="dropdown" uib-dropdown>
            <a aria-expanded="false" aria-haspopup="true" class="dropdown-toggle" uib-dropdown-toggle href="" role="button">
              <span class="glyphicon glyphicon-flag"></span>
              Events
              <span class="caret"></span>
            </a>
            <ul class="uib-dropdown-menu" role="menu">
              <li>
                <a href="">Event 1</a>
              </li>
              <li>
                <a href="">Event 2</a>
              </li>
            </ul>

Hope this helps.

0 讨论(0)

心在旅途

2021-01-01 11:30

NOTE: Most answers here are outdated! The main issue is that the dropdown directive is not available as a class anymore, but only as an attribute, and that it has been renamed to uib-dropdown.

I was stuck here for a while, but changing the class into an attribute worked as a charm.

Also, you need to use the 'uib-' prefix for each directive instead of plain names.

<li uib-dropdown>
    <a uib-dropdown-toggle>a<span class="caret"></span></a>
    <ul uib-dropdown-menu>
        <li><a ui-sref="a">a</a></li>
        <li><a ui-sref="b">b</a></li>
        <li><a ui-sref="c">c</a></li>
        <li><a ui-sref="d">d</a></li>
    </ul>
</li>

(And of course, make sure you did not forget to include the ui.bootstrap module in your app.)

var app = angular.module('App', ['ui.router','ui.bootstrap']);

0 讨论(0)

旧时难觅i

2021-01-01 11:32

I found a great resource from here regarding the subject, as I had the same issue. I'll outline what I did below.

Download ui bootstrap
Move zipped file to target directory for app, and unzip
locate the latest edition of the ui bootstrap release, which in my case, is located at "bootstrap-gh-pages/ui-bootstrap-tpls-0.13.0.min.js"
Include the minified js file in your main .html file: <script src='stylesheets/bootstrap-gh-pages/ui-bootstrap-tpls-0.13.0.min.js'></script>
Go back to Angular directives and scroll down to the dropdown section. Copy their javascript into your primary js file and html samples and customize as usual

That's what did it for me. Hope that helps anyone else with the same issue.

0 讨论(0)

上一页 1 2