mgcrea / angular-strap

AngularJS 1.2+ native directives for Bootstrap 3.

Hi there 👋

I'm Olivier, a 🇫🇷 FullStack Developer.

Languages & Tools

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?

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 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.

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?

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.

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.

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/

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()
....

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.

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.

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.

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.

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 ;)

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

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

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...

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

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.

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.

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...

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?

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.

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 ?

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

Directives not working on IE9

Many directives do not work in Internet Explorer.

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

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 ?

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?

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!

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

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!

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 ?

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.

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 =).

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) {
     ......
   }
}

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.

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.

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?

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.

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

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.

gh-pages weird <body>

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

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.

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.

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

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 -->

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

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.

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-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.