Search code examples
angularjstabsiconspicker

Angular bootstrap tabs don't work with ui-iconpicker

I'm trying to implement Angular UI Bootstrap Iconpicker in my project but it doesn't work because I'm using those js files for angularjs tabs: 

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.3.0.js"></script>

and for ui-iconpicker I use those files:

    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js"></script>
    <script src="@routes.Assets.versioned("bower_components/ui-iconpicker/dist/scripts/ui-iconpicker.min.js")"></script>

I think there is a confusion between the two files (ui-bootstrap-tpls) but when I remove one of them the associated component don't work!! any help please

Solution

  • This problem is known to the author of ui-iconpicker.

    See ui-iconpicker Issue #4: Doesn't work with ui-bootstrap >= 0.11.0

    @justin-lau justin-lau added the wontfix label on Jan 29, 2015

    @rapheki commented on May 20:

    i had a similar issue, you need to modifiy the ui-iconpicker.js file and replace in line 156 (the templates/iconpicker.html):

    • "dropdown>" to "uib-dropdown>"
    • "dropdown-toggle>" to "uib-dropdown-toggle>"