3

In my application, I'm using the $modal directive of boostrap.ui. I'm also using the Bootstrap navbar with dropdown functionalities.

I'm having the problem that window.html cannot be found as described in this topic.

The problem in my case is that I have both a ui-boostrap.js file and a ui-bootstrap-tpls file included (v1.3.2)

According to this topic, I should only need the tpls file. However, when I remove the boostrap.js file, all the other bootstrap functionalities for the dropdowns in my header are not working anymore.

Is it not possible to have both functionalities available?

Shashank Agrawal
  • 25,161
  • 11
  • 89
  • 121
Anonymoose
  • 2,389
  • 6
  • 36
  • 69

2 Answers2

3

UI-Bootstrap library is just an Angular wrapper for core Bootstrap library to remove the dependency of jQuery from the application. From the docs:

This repository contains a set of native AngularJS directives based on Bootstrap's markup and CSS. As a result no dependency on jQuery or Bootstrap's JavaScript is required.

ui-bootstrap-tpls.min.js or ui-bootstrap-tpls.js contains the default template for all the Javascript module shipped by Bootstrap i.e. why it's named -tpls.

The other file ui-bootstrap.min.js or ui-bootstrap.js does not include any templates for the Javascript modules/features.

So you should only include ui-bootstrap-tpls.min.js or ui-bootstrap-tpls.js if you are not planning to override any template.

The answer about why dropdown stopped working after removing bootstrap.js is that your HTML code is still using the jQuery version of Bootstrap but you should start using the ui-bootstrap version of those modules. Yes, it is possible to include both the Angular version of bootstrap (i.e. ui-bootstrap.min.js) and jQuery version of bootstrap (bootstrap.js) but it will be extra overhead on the app.

There is no need of jQuery in order to use Bootstrap's Javascript features if you have already included the ui-bootstrap library.

Shashank Agrawal
  • 25,161
  • 11
  • 89
  • 121
  • 1
    Thanks, It seems like I have mad a mess by using jquery.js, boostrap.js, angular.js and ui-boostrap-tpls.js. I will try to remove the Jquery version. – Anonymoose Jul 18 '16 at 08:16
  • Yes, if you are not using jQuery for other than just the Bootstrap, better get rid of it and start using the `ui-bootstrap`. That will also save your app from loading additional data and will be faster. – Shashank Agrawal Jul 18 '16 at 08:18
1

As explained by shashank, all bootstrap elements in bootstrap.js in converted to angular directives in ui-bootstrap-tpls. If you simply replace the file it wont work as you expected.

If you changes to ui-bootstrap-tpls then you need to change the corresponding bootstrap components to angular ui directives.

Seetharaman GR
  • 272
  • 1
  • 13