Bootstrap 3 Compatible with Current Angularjs Bootstrap Directives

Bootstrap 3 compatible with current AngularJS bootstrap directives?

So, the http://angular-ui.github.io/bootstrap/ project does not depend on Bootstrap's JavaScript (it is not wrapping it, not requiring etc.). Those are native AngularJS directives written from the ground-up to be lightweight and well integrated into the AngularJS ecosystem.

The only adherence to the Bootstrap project is Bootstrap's markup (HTML) and CSS.

If you ask a question "can I grab all the directives and use them with Bootstrap 3.0" the answer is "it depends". It really depends if and how much Bootstrap 3.0 decide do change its markup and corresponding CSS classes. I would presume that markup of some controls have changed and not for some others.

Now, the very good news with http://angular-ui.github.io/bootstrap/ is that most of the HTML markup and CSS classes are encapsulated in separate AngularJS templates. In practice it means that you can grab the JavaScript code of the directives and only change markup (templates) to fit into Bootstrap 3.0.

All the templates are located here:
https://github.com/angular-ui/bootstrap/tree/master/template
and by browsing them you should get an idea that it is pretty simple to update markup without messing with JavaScript. This is one of the design goals of this project.

I would encourage you to simply give it a try and see how CSS of Bootstrap 3.0 works with the existing directives and templates. If you spot any issues you can always update templates to Bootstrap 3.0 (and contribute them back to the project!)

Wiring up AngularUI to Bootstrap 3 throwing errors

It's because you try to extract only one part of AngularUI sources, not compiled version.

So you lack the module declaration for 'ui.bootstrap' (and surely other pieces).

As Bootstrap 3 compatibility is not done, there is no compiled version (and no more CDN) for this AngularUI version.

You have to get all sources from branch bootstrap3_bis2, and build them with grunt. It's explain in project README (Contributing to the project > Build).

It will generate 2 JS files (one is minified and the other is not) you have to include one of them to your page and it will works correctly.

AngularJS with bootstrap 3 accordion not working when included via ng-view

The problem is that Bootstrap appends #according_name within a a tag. This triggers a AngularJS routing and due to route change test.html is loaded again on every click on accordian link.

Your options are to try to configure $locationProvider to use HTML5 mode with hashbag if it works

$locationProvider.html5Mode(true).hashPrefix('!');

See some documentation here

Other would be to use angular-ui component but it has been not ported to support version 3 of bootstrap.

Best way to represent a Grid or Table in AngularJS with Bootstrap 3?

After trying out ngGrid, ngTable, trNgGrid and Smart Table, I have come to the conclusion that Smart Table is by far the best implementation AngularJS-wise and Bootstrap-wise. It is built exactly the same way as you would build your own, naive table using standard angular. On top of that, they have added a few directives that help you do sorting, filtering etc. Their approach also makes it quite simple to extend yourself. The fact that they use the regular html tags for tables and the standard ng-repeat for the rows and standard bootstrap for formatting makes this my clear winner.

Their JS code depends on angular and your html can depend on bootstrap if you want to. The JS code is 4 kb in total and you can even easily pick stuff out of there if you want to reach an even smaller footprint.

Where the other grids will give you claustrophobia in different areas, Smart Table just feels open and to the point.

If you rely heavily on inline editing and other advanced features, you might get up and running quicker with ngTable for instance. However, you are free to add such features quite easily in Smart Table.

Don't miss Smart Table!!!

I have no relation to Smart Table, except from using it myself.

Extending Angular UI Bootstrap Popover

Seems like I was no clear enough, my problem was not (yet) to add HTML in the popover bu to create the popover from my own directive.

This is a way to do it:

.directive('myDirective', function() {
    return {
        restrict: 'A',
        template: '<span popover="content" popover-title="title"></span>',
        link: function($scope) {
            $scope.content = '.....';
            $scope.title = '.....';
        }
    };
})

And about HTML content, Chi Row gave a solution which is not applicable yet with the official version (tough available on a fork https://github.com/jbruni/bootstrap-bower-jbruni)

aet version also work on the current version

---

Related Topics