mgcrea/angular-strap

AngularJS 1.2+ native directives for Bootstrap 3.

AngularStrap

AngularStrap is a set of native directives that enables seamless integration of Bootstrap 3.0+ into your AngularJS 1.2+ app.

• With no external dependency except the Bootstrap CSS Styles, AngularStrap is lighter and faster than ever as it does leverage the power of ngAnimate from AngularJS 1.2+!

• AngularStrap is tested against the latest patch release of the 1.2, 1.3, 1.4 and 1.5 branches.

• If you don't want to use ngAnimate, you will have to include a tiny ngAnimate mock.

Looking for maintainers!

We're currently looking for aspiring maintainers to tackle issues and pull requests!

I (mgcrea) have not worked on any Angular.js v1 codebase for more than a year now. For me it's time to move on!

If you have an ongoing project depending on AngularStrap, and would like to become a contributor, please chime in on issue #2256

Documentation and examples

• Check the documentation and changelog.

Communication

• If you need help, use Stack Overflow. (Tag 'angular-strap')
• If you'd like to ask a general question, use Stack Overflow.
• If you found a bug, open an issue.
• If you have a feature request, open an issue.
• If you want to contribute, submit a pull request.

Quick start

• Install AngularStrap with Bower.

$ bower install angular-strap --save

• Include the required libraries in your index.html:

<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-strap/dist/angular-strap.min.js"></script>
<script src="bower_components/angular-strap/dist/angular-strap.tpl.min.js"></script>

• Inject the mgcrea.ngStrap module into your app:

angular.module('myApp', ['ngAnimate', 'mgcrea.ngStrap']);

Developers

Clone the repo, git clone git://github.com/mgcrea/angular-strap.git, download the latest release or install with bower bower install angular-strap --save.

You will need to have bower installed globally into your node environment.

$ npm install -g bower

AngularStrap is tested with karma against the latest stable release of AngularJS.

AngularStrap uses [email protected], you must use the local gulp instance with $(npm bin)/gulp for it to work (or use an alias).

$ npm install
$ bower install
$ cd docs
$ bower install
$ cd ..
$ npm test
# or
$ npm run test:watch

You can build the latest version using gulp.

$ $(npm bin)/gulp build

You can quickly hack around (the docs) with:

  $ $(npm bin)/gulp serve

You can browse to http://localhost:9090/dev.html to work on a specific directive.

Contributing

Please submit all pull requests the against master branch. If your pull request contains JavaScript patches or features, you should include relevant unit tests. Please check the Contributing Guidelines for more details. Thanks!

Authors

Olivier Louvignes

• http://olouv.com
• http://github.com/mgcrea

Copyright and license

The MIT License

Copyright (c) 2012 – 2015 Olivier Louvignes

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

angular-strap's Issues

Validation on bs-buttons-radio (Radio)

Hello (Bonjour),
The following must not be considered as an issue. It is probably a feature request. I'm trying to validate the presence of a user gender in a form.

<div class="control-group" ng-class="{error: UserForm['user[gender]'].$invalid}">
  <label class="control-label">Gender</label>
  <div class="btn-group" ng-model="user[gender]" bs-buttons-radio required>
    <button type="button" class="btn" value="{{gender.value}}" ng-repeat="gender in genders">{{gender.name}}</button>
  </div>
  <span class="help-inline" ng-show="UserForm['user[gender]'].$error.required">Gender is required.</span>
</div>

Does validation work with the bs-buttons-radio directive?

Popover with ng-repeat

Hello,

First off, thanks for putting this all together. Its been very helpful.

I am using a popover thats content is in an external html page. The html page uses ng-repeat to populate its content. When I only have one item the popover works fine but when I have more than one item the popover duplicates the data. I debugged the directive when its called and it seems to be going through the $timeout code (pasted it below just for your reference) twice and that's where the issue happens. I'm wondering if ng-repeat is not compatible or if there is another reason the $timeout function is getting called twice?

                                         $timeout(function() {

                        var popover = element.data('popover'),
                            $tip = popover.tip();

                        $compile($tip)(scope);

                        setTimeout(function() {
                            popover.refresh();
                        });

                    });

Thanks for the help! Let me know if I wasn't clear or need to explain more.

-John

Weird issue on validation of datepicker

Hello,
as you can see from your demo if I write an invalid date, say "01/01/2011sss" the datepicker correctly sets it back to the previous value, but the validation is not triggered again for the input! Why is that? Is there a way of fixing this?

Thank you.

bs-navbar don't add active class when the menu is dynamically generated?

hi, when the navigation elements are created dynamically the addClass("active") method stop working. for more detailed information check the code on plnkr.

Esc doesn't close modal

Can you make this happened ? This is the default behaviour of modal in twitter bootstrap with js supported I guess

bs-datapicker doesn't work

TypeError: Object [[object Text]] has no method 'on'
    at postLink (http://localhost:3501/scripts/vendor/angular-strap.js:326:15)

It seems that we do not have the on() function for text object ;)

Typeahead: Option to add a function which would make call to backend for data based on user input

In the current functionality of typeahead, it filters data from static array.
if there is an option to add ng-change= "func()" which would make background call and typeahead should filter from updated data. In the current functionality, even if we can add ng-change, typeahead doesn't consider the updated array, it filters from the existing one.

Add example to use ng-controller along bs-modal to create a custom scope for your modal

As stated in the docs, altough there isn't a clear example about that. It will be helpful.

Cannot use inline template (in <script type="text/ng-template">) as modal template

Modal templates are always loaded via http, please add support to load Inline templates.

typeahead issue with data-min-length=0

It seems like the typeahead stuff does not respect the data-min-length property. (Though I'd really like it to be 0, which bootstrap does not yet support anyway).

Any ideas on how you'd like to see it fixed?

I'll do the work =).

Documentation does not describe how to install/initial configuration

I assume we need to add '$strap.directives' to our module? That seems to work for me. I did not see any doc on this though. Perhaps I just missed it?

Need to use your bs-datepicker correct?

I had problems using the angular-strap datepicker with the bootstrap-datepicker download from Stefan Petre's site. Because your download button only includes the angular-strap source, I assumed I needed the bootstrap-datepicker code from Stefan's site. Specifically, the datepicker did not support auto-close. I then downloaded the version from your site and it all worked. Looking at the javascript, it appears that the bootstrap-datepicker.js file from your site had many improvements. Thanks. Can I suggest that you provide a download archive instead of the single .js source file and include any improved files. Wasn't obvious to me that I needed to snag your improved files along with the single source download. Many thanks.

Add a way to pass options to Datepicker

For example, startView.

I've also created this post on the AngularJS Google Group.

https://groups.google.com/forum/?fromgroups=#!topic/angular/jeUtVuztXzI

Thank you,
Danny

The possibility of adding custom class for modal

I want to add custom class to modal. It's gonna be very useful to have a custom styling for modals.
What do you think about this feature ?

Add Support for Google Maps Directive

I'm pretty new to Angular and Angular Strap is awesome. Would love to see Google Maps directive feature added.

bs-navbar data-match-route

I tried to use bs-navbar data-match-route in html5 mode and can't seem to get it to do anything. Is it supposed to work in html5 (not hash) mode?

<body ng-init="basePath='/japn'">
    <div class="navbar" bs-navbar>
      <div class="navbar-inner">
        <div class="container">
          <a class="brand" ng-href="{{basePath}}/app" >
            <img ng-src="{{basePath}}/static/libs/jive/logo/jive-logo-desktop-1-19.png" />
          </a>
          <a class="brand" ng-href="{{basePath}}/app">JAPN</a>
          <div class="nav-collapse">
            <ul class="nav">
              <li data-match-route="/status">
                <a ng-href="{{basePath}}/app/status">Status</a>
              </li>

              <li data-match-route="/edit">
                <a ng-href="{{basePath}}/app/edit">Edit</a>
              </li>
            </ul>
          </div><!-- /.nav-collapse -->
        </div>
      </div><!-- /navbar-inner -->
    </div><!-- /navbar -->

Consider add container option, that solves some bootstrap issue

Hello,

The container option was introduced to solve some issues of tootip and popover (like style break in btn-group, popover hidden on modal, etc). So, IMO, it also could be implemented here.

Reference:
twbs/bootstrap#5768

I would be happy in submit a PR if you agree.

Thanks!

Add package to nuget gallery (for Visual Studio)

Is it possibile to add the angular-strap package to the nuget gallery? It's pretty straightforward and would be great for us (bohoo) .NET developers.

Popups don't render templates correctly on 2nd try

The first time a popup displays everything seems fine. On subsequent displays, the template doesn't appear to compile/render correctly unless another digest cycle is forced. Changing scope.$digest() to scope.$root.$digest appears to fix this though.

// Compile content
$compile(this.$tip)(scope);
scope.$root.$digest(); // WAS: scope.$digest();

// Bind popover to the tip()
....

Support for "yy" years format

Please add support for all formats described below:

About
Add datepicker picker to field or to any other element.

can be used as a component
formats: dd, d, mm, m, yyyy, yy
separators: -, /, .

Formats copied from http://www.eyecon.ro/bootstrap-datepicker/

bsTooltip stops angular binding on some UI elements (e.g. checkbox)

<div ng-controller="FooCtrl">
  <input type="checkbox" ng-model="foo" bs-tooltip="tooltip.foo">
  <p>{{foo}}</p>  <!-- foo isn't updated when bs-tooltip is in place -->
</div>

angular.module('foobar', function (){ })
  .controller('FooCtrl', function ($scope) {
  $scope.foo = false;
  $scope.tooltip = {
    foo: "some tooltip"
  };
});

When using bs-tooltip on a checkbox, the binding to ng-model no longer works. Remove bs-tooltip directive and the binding works.

If I have a free minute, I'll look closer at the source to see what might be going on, but wanted to enter an issue, so you were aware of it.

Radios not working with button containing icon instead of text

When using radios with button containing icon (instead of text) and the user click centrally in the icon (instead of button bezel) you get an error and model is not updated.

Plunker of the issue before:
http://plnkr.co/edit/six3iyuD2JoWq9yckp0F

and after fix (chilang@3d2aa64)

http://plnkr.co/edit/JMPetdlQwgXvGQ12Jxg0

Let me know if you want a PR

Template curly braces showing momentarily before...

Hiya,
Just a quick headsup that your curly braces are flashing for a second before angular can render them. For instance in your popover. Might http://docs.angularjs.org/api/ng.directive:ngCloak be the thing to fix that?

Thanks for the great work.. Just trying to grok angular directives + bootstrap so what you're doing here is a big help. Keep it up!

bsTooltip $scope.show() and $scope.dismiss() are missing

According to the documentation $scope.show() and $scope.dismiss() are available for bsTooltip but they are missing in the code base.
They would be a nice feature, because if you add a tooltip to a button, click on it and go to another view the tooltip remains on the screen. If $scope.dismiss() would be available I could call it on ng-click.

bs-tooltip not refreshing dynamic tooltip content

bs-tooltip directive is currently setting the value of the tooltip once at initialization time (with $eval) but fails to refresh on more dynamic scenarios.

I think the initialization should use $observe instead. Something like:

    attrs.$observe( 'bsTooltip', function(value) {
                element.tooltip({ title: value, 
              ...

Let me know if you need a jsfiddle with a concrete example.

Thanks,
Fernando

Several button for the same Modal

Hi,

if I have several buttons
...

willl they refer to the same instance of modal.html or several instances. I assume the latter.
How can I have several buttons to open the same modal ?
Thanks

gh-pages weird <body>

There is a weird closing < / body > element in your github pages.

Calendar does not shown when called inside modal

Calendar does not shown when called inside modal directive. It seems caused because z-index problem, where modal layer placed on higher layer than calendar layer.

I fixed it by adding z-index:20000 in calendar.css, but I feel it like a hack. If this problem can be fixed in angular-strap, that would be better.

datepicker doesn't auto close

I followed the example in the documentation and it doesn't auto-close when a date is picked.

what can cause this ?

Form element autofocus doesn't work inside modal dialog

Hi, I am using angular-strap and I have a form element inside a modal dialog that I would like to autofocus. The element is briefly focused but then it loses it's focus.

Discussion with the AngularUI guys

Got wind of this project and had some interest, concerns, curiosity, questions and feedback.

I was wondering if you'd be interested to chat online sometime?

There are / have been a few similar / identical projects floating around and I thought it would be constructive to kind of merge efforts.

Troubles to deploy to Heroku

Hi, I have written a Rails app integrating angular-strap plus the datepicker. Everything works smooth on my MacBook Air and iMac, booth with Chrome and Safari. After deploying to a staging enviroment on Heroku I always get the error messages:

Failed to load resource https://mgcrea.github.com/angular-strap/js/angular-strap.min.js
Failed to load resource https://mgcrea.github.com/angular-strap/js/bootstrap-datepicker.js
Uncaught Error: No module: $strap.directives angular.min.js:16

I added the following code to my HTML page (in HAML notation):

= stylesheet_link_tag :application
%script{:src => '//ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js'}
%script{:src => '//ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular-resource.min.js'}
%script{:src => '//mgcrea.github.com/angular-strap/js/angular-strap.min.js'}
%script{:src => '//mgcrea.github.com/angular-strap/js/bootstrap-datepicker.js'}
= javascript_include_tag :application

I understand the issue now:

1. On dev I load the stuff from http
2. On staging I load the stuff from https but the files are not available there.

Possible to make it available by https?

Set bootstrap-timepicker dependency in component.json

It's in the Bower registry
https://github.com/jdewit/bootstrap-timepicker/blob/master/component.json

Sent you another note about bootstrap-datepicker -- though the new fork is not yet in Bower.

Typehead list doesn't update on model change

I update the underlying model with an on-change model, but the typeahead dropdown still contains the initial suggestions

In the plunker, I expect the dropdown to have update values after any input, but the old suggestions are returned

http://plnkr.co/edit/qjGZpIWKD2fJQkgpA1e4

Datepicker doesn't seem to update my model

Not sure if I'm missing something or what... but here's a jsfiddle:

http://jsfiddle.net/dobladez/AJdBQ/

I pick a date, the value in the model doesn't change.

Thanks

Website repository?

Is there a repository for the site http://mgcrea.github.com/angular-strap/ ? I saw some grammatical errors and errors in the example code and I wanted to submit a pull request.

EDIT: Sorry dumb question. It's in the gh-pages branch!

bs-datepicker: add support for "language" option

Please as alternative to specify the dateFormat option, also support the language option, to be used in conjuction with the locale js.

Directives not working on IE9

Many directives do not work in Internet Explorer.

TypeError: Object [object Object] has no method 'timepicker'

Hi:

I've got a timepicker inside a div setup like this:

<input type="text" ng-model="start_time" bs-timepicker>
<i class="icon-time" style="position: relative;margin: 2.5px 0 0 -24px;"></i>

The div is called by ng-include, however whenever I include the above error appears and obviously timepicker doesn't work

Here's the call stack:

TypeError: Object [object Object] has no method 'timepicker'
    at postLink (http://localhost/prensas-ui/app/lib/angular_strap/angular-strap.js:722:13)
    at nodeLinkFn (http://localhost/prensas-ui/app/lib/angular/angular.js:4260:13)
    at compositeLinkFn (http://localhost/prensas-ui/app/lib/angular/angular.js:3871:15)
    at nodeLinkFn (http://localhost/prensas-ui/app/lib/angular/angular.js:4254:24)
    at compositeLinkFn (http://localhost/prensas-ui/app/lib/angular/angular.js:3871:15)
    at publicLinkFn (http://localhost/prensas-ui/app/lib/angular/angular.js:3777:30)
    at http://localhost/prensas-ui/app/lib/angular/angular.js:13317:43
    at http://localhost/prensas-ui/app/lib/angular/angular.js:8906:11
    at wrappedCallback (http://localhost/prensas-ui/app/lib/angular/angular.js:6753:59)
    at http://localhost/prensas-ui/app/lib/angular/angular.js:6790:26 <input type="text" ng-model="start_time" bs-timepicker="" class="ng-pristine ng-valid" data-toggle="timepicker"> 

The line that triggered the error is:

element.timepicker();

It's the last line in the timepicker directive.

Am I doing something wrong?
Or maybe it isn't working because it's inside a ng-include?

popover content flickering

bsPopover is re-rendered after a timeout every time the popover is toggled, this lead to visible flickering and a bad user experience. Would it be possible to compile the content only once and pass it to Bootstrap popover as a dom element instead of a string? This way the rendering would happen off-screen with no visible reflow.

Timepicker hide triggers popover hide, causing it to be prematurely destroyed.

It seems that when using bs-timepicker inside of a popover partial template the hide event of the timepicker triggers line 560 ($popover.on('hide')) to run and kill the timepicker before it should be killed. This results in the timepicker not appearing again when the input is clicked, until a new one is created when the popover is re-instantiated.

To see this in action, add a console log just inside the $popover.On('hide') function and click out of the timepicker. It should fire this log message.

Could you help with bs-navbar? Cannot make it working.

Here is my code:

<div class="navbar navbar-fixed-top" bs-navbar>
            <div class="navbar-inner">
                <div class="container-fluid">
                    <a class="brand" href="#" name="top">Portal</a>
                    <div class="nav-collapse collapse">
                        <ul class="nav">
                            <li data-match-route="#/dashboard">
                                <a href="#/dashboard"><i class="icon-file"></i> Dashboard</a>
                            </li>
                            <li class="divider-vertical"></li>
                            <li data-match-route="#/accounts">
                                <a href="#/accounts"><i class="icon-envelope"></i> Management</a>
                            </li>
                            <li class="divider-vertical"></li>
                            <li data-match-route="#/reports)">
                                <a href="#/reports"><i class="icon-signal"></i> Reports</a>
                            </li>
                            <li class="divider-vertical"></li>
                            <li data-match-route="/(:?navbar)">
                                <a href="#/admins"><i class="icon-lock"></i> Administration</a>
                            </li>
                            <li class="divider-vertical"></li>
                        </ul>
                        <div class="btn-group pull-right">
                            <button class="btn">Username</button>
                            <button class="btn">Logout</button>   
                        </div>
                    </div>
                    <!--/.nav-collapse -->
                </div>
                <!--/.container-fluid -->
            </div>
            <!--/.navbar-inner -->
        </div>
        <!--/.navbar -->

JavaScript is included, not error in firebug and nav bar is not working, what is wrong with my code?

Datepicker: if a controller is undefined throw error on row 154 (angular-strap.js)

if the controller is undefined when the following row is processed is throw an exception:

// Handle date validity according to dateFormat
controller.$parsers.unshift(function(viewValue) {

it should be wrapped like this (as you did some lines before that:

if (controller) {
   // Handle date validity according to dateFormat
   controller.$parsers.unshift(function(viewValue) {
     ......
   }
}

Infinite validation loop when using function source for typeahead

When I supply a function as the source for bsTypeahead like so:

input(type="text", bs-typeahead="getNames()", ng-model="newAttendee")

getNames() being defined like:

$scope.getNames = function() {
  var names = $.map( people.data.people, function( person ) {
    return person.name;
  } );
  return names;
};

It will produce an infinite loop. The byTypeahead attribute is watched for changes

        // Watch bsTypeahead for changes
        scope.$watch(attrs.bsTypeahead, function(newValue, oldValue) {
            if(newValue !== oldValue) {
                value = newValue;
            }
        });

newValue and oldValue will always be separate array instances, but both arrays will contain identical elements. This results in

Uncaught Error: 10 $digest() iterations reached. Aborting! Watchers fired in the last 5 iterations: [["fn...

How to add bootstrap attributes on the modal div

Since you are generated the parent modal div, how can I pass bootstrap attributes like data-backdrop="static" to the directive ?

how to pass model's data to modal

How can I pass data from a specific model to modal ?
For example: I have a list of product, I click on product's image, it should pass that product information to the opened modal

Call the modal from controller

Hi..sorry for the noob question...I'm still newbie with angularjs and really really newbie with the twitter bootstrap ...I wish call the modal from a controller and not when I press a button...is it possible??..thanks...

bs-modal with variable replacement doesn't work

I have to specify a static server url. Basically something like this.

< button class="btn" bs-modal="'{{ staticURL}}/partial/modal.html'" >...< /button >

The url is replaced when I look at the DOM but the button doesn't work.

Typeahead does not work dynmically

The array used for Typeahead will not recognized new items added to it. It only works on items added at initialization.

bs-alert is removed from the DOM when closed

When the bs-alert is closed with the X button on the right it's removed from the DOM which renders it unusable for other alerts. Perhaps it should call a custom method in the scope which clears the alert data.