FAQ

I'm using $modal service but it can't find its templates

tl;dr:

• check that you've got dependency on one deliverable from this repository and that this deliverable has -tpls- in its name;
• make sure that you declare a dependency on the ui.bootstrap module and not some other module of an individual directive (ex.: 'ui.bootstrap.modal'

Full explanation

This project comes with several deliverables described here: https://github.com/angular-ui/bootstrap/tree/gh-pages#build-files If the roles of those files are not clear for you just pick ui-bootstrap-tpls-[version].min.js, but be sure to include only one file in your project.

The dist files with the -tpls- in their name come with the templates bundled inside $templateCache. You can check how this bundling works by inspecting this file. The important point here is that templates are part of the distribution file so you don't need to download them separately. Also, those templates are pre-loaded with JS file so a browser won't request them on run-time.

The describing bundling works by putting each template into a separate AngularJS module. So, in order for those bundled templates to be pre-loaded a module corresponding to a given template must be part of your application. You can either list those modules explicitly, ex.:

angular.module('myApp', ['ui.bootstrap.modal', "template/modal/backdrop.html","template/modal/window.html"]);

Obviously this is a lot to write so you can simply make your application dependent on the ui.bootstrap module as it has transitive dependencies to all the modules containing templates:

angular.module('myApp', ['ui.bootstrap']);

This is a recommended method explained in the installation instruction: https://github.com/angular-ui/bootstrap#installation

My input / select element doesn't work as expected inside the tab / accordion directive

This is a scoping issue. Many directives from this repository are creating a new scope. This means that your ngModel binding gets evaluated in the context of a new, child scope, and not in the context of an original scope. As a quick rule of thumb you should always have a dot as part of your ngModel expression. In depth discussion of the topic can be found here:

• https://github.com/angular/angular.js/wiki/Understanding-Scopes
• http://www.youtube.com/watch?v=DTx23w4z6Kc

My input elements stop working when I place a tooltip / popover on it

This is a scoping issue. In the current version of AngularJS each DOM element can have one and only one scope. In other words each directive placed on a given DOM element are evaluated against one scope. Both tooltip and popover are creating a new scope so placing them on an input make the ngModel to be evaluated in the context of a new scope created by a tooltip / popover.

Currently the best option of working around this problem is to prefix an expression inside the ngModel with a parent scope, ex:

<input type="text" tooltip="Tooltip on foo" ng-model="$parent.fooModel">