Bootstrap directives for AngularJS.
Fetches an external html partial (or an inline ng-template
) and populates the modal with its content.
Use any button/link to trigger a modal by appending a bs-modal
attribute.
Both $scope.show()
, $scope.hide()
& $scope.$modal()
are available inside the modal to toggle its visibility.
<!-- Button to trigger modal --> <button type="button" class="btn" bs-modal="'partials/modal.html'">...</button> <!-- Modal (external ./partials/modal.html or inline ng-template) --> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3>Modal header</h3> </div> <div class="modal-body"> <p>{{modal.content}}</p> <br /> <pre>2 + 3 = {{ 2 + 3 }}</pre> </div> <div class="modal-footer"> <button type="button" class="btn" ng-click="hide()">Close</button> <button class="btn btn-primary" ng-click="modal.saved=true;hide()">Save changes</button> </div>
(show, hide, $modal)
out of its scope by passing them: ng-click="someScopeFunction($modal)"
.
AngularStrap ships with a $modal
service that you can inject in your controllers to trigger modals in a more efficient way (ie. inside ng-repeat
, etc.).
// Create modal (returns a promise since it may have to perform an http request) var modalPromise = $modal({template: '/js/app/views/elements/modal-welcome.html', persist: true, show: false, backdrop: 'static', scope: $scope}); // Toggle modal $scope.showModalViaService = function() { $q.when(modalPromise).then(function(modalEl) { modalEl.modal('show'); }); };
Toggleable, contextual menu for displaying lists of links.
Use any element to trigger a dropdown menu by appending a bs-dropdown
attribute.
<!-- Button to trigger dropdown --> <button type="button" class="btn" bs-dropdown="dropdown">...</button> <!-- Separated button --> <div class="btn-group"> <button type="button" class="btn btn-primary">...</button> <button type="button" class="btn btn-primary" bs-dropdown="dropdown">...</button> <span class="caret"></span> </button> </div>
Create tabs interfaces by appending a bs-tabs
attribute to a div container.
<div data-fade="1" ngModel="activeTab" bs-tabs> <div ng-repeat="tab in tabs" data-title="{{tab.title}}"><p>{{tab.content}}</p></div> </div>
ngModel
attribute.myObj.myProp
) to make the two-way databinding work.
Parses the content passed to the directive & displays a tooltip with it.
Use any button/link to trigger a tooltip menu by appending a bs-tooltip
attribute.
Both $scope.show()
and $scope.hide()
are available inside the tooltip to toggle its visibility.
tooltip: {{tooltip | json}}
Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown.
<!-- Basic tooltip on hover --> <a href="#" bs-tooltip="tooltip.title">...</a> <!-- Button to trigger tooltip on click --> <button type="submit" class="btn" data-trigger="click" bs-tooltip="tooltip.title">...</button> <!-- Force close others with data-unique attribute --> <input type="text" data-trigger="focus" data-unique="1" bs-tooltip="tooltip.title"/> <!-- Two-way databinding --> <input type="checkbox" ng-model="tooltip.checked" bs-tooltip="tooltip.title"/>
ng-model
there has to be a dot somewhere." Miško Hevery
Fetches an external html partial (or an inline ng-template
) and populates the popover with its content.
Use any button/link to trigger a popover menu by appending a bs-popover
attribute.
Both $scope.show()
and $scope.hide()
and $scope.$popover()
are available inside the popover to toggle its visibility.
<!-- Button to trigger popover with an external partial --> <button type="button" class="btn" bs-popover="'partials/popover.html'">...</button> <!-- You can also use a simple object {title:'', content:'', etc.} instead of a partial/template --> <button type="button" class="btn" bs-popover="popover">...</button> <!-- Force close others with data-unique attribute --> <button type="button" class="btn" data-unique="1" bs-popover="'partials/popover.html'">...</button> <!-- Popover (external ./partials/popover.html or inline ng-template) --> <form name="popoverForm"> <p ng-bind-html-unsafe="popover.content"></p> <br /> <pre>2 + 3 = {{ 2 + 3 }}</pre> <div class="form-actions"> <button type="button" class="btn" ng-click="submitForm($popover)">Close</button> <button class="btn btn-primary" ng-click="popover.saved=true;hide()">Save changes</button> </div> </form>
ng-controller="MyPopoverCtrl"
alongside bs-popover="..."
to spawn a controller with a custom scope for your popover.
Build a custom alert with the bs-alert
attribute.
alerts: {{alerts | json}}
<!-- Basic static alert (default bootstrap behavior) --> <div class="alert fade" bs-alert><strong>Hey!</strong> This is a static alert.</div> <!-- Alert bound to an object (alert.closed is set to true on close) --> <div class="alert fade" bs-alert="alert"></div> <!-- Use an array stack (alert is removed from the stack on close) --> <div class="alerts"> <div class="alert fade" ng-repeat="alert in alerts" bs-alert="alert"></div> </div>
data-dismiss="alert"
to dismiss your alerts.
Use any input with typeahead functionality by appending a bs-typeahead
attribute.
value: {{typeaheadValue}}
typeahead: {{typeahead}}
<input type="text" ng-model="typeaheadValue" bs-typeahead="typeahead"> <!-- You can also use a function --> <input type="text" ng-model="typeaheadValue" bs-typeahead="typeaheadFn"> <!-- Function defined in your controller --> $scope.typeaheadFn = function(query) { return $.map($scope.typeahead, function(country) { return country + '_1'; }); } <!-- Async function defined in your controller --> $scope.typeaheadFn = function(query, callback) { $http.get('/stations/autocomplete?term='+query).success(function(stations) { callback(stations); // This will automatically open the popup with retrieved results }); }
data-min-length
attribute to either show the popup right away (minLength=0) or only after a specific number of chars have been typed in.
Directive for bootstrap-select (made by Silvio Moreto).
Append a bs-select
attribute to enable bootstrap-select on a regular Angular select.
Requires bootstrap-select.js
& bootstrap-select.css
.
<select class="span2" ng-model="selectedItem" ng-options="value.id as value.name for (key, value) in selects" data-style="btn-primary" bs-select></select>
<select class="span4" ng-model="selectedItem" multiple title="Choose one of the following..." ng-options="value.id as value.name for (key, value) in selects" data-style="btn-primary" bs-select></select>
Directive for bootstrap-datepicker (made by Stefan Petre).
Requires bootstrap-datepicker.js
& bootstrap-datepicker.css
.
Add a datepicker to an input by appending a bs-datepicker
attribute.
Supports AngularJS validation out of the box.
datepicker: {{datepicker | json}}
<div class="control-group input-append"> <input type="text" ng-model="datepicker.date" data-date-format="dd/mm/yyyy" bs-datepicker> <button type="button" class="btn" data-toggle="datepicker"><i class="icon-calendar"></i></button> </div> <!-- You can use the global $strapConfig to set defaults --> app.value('$strapConfig', { datepicker: { language: 'fr', format: 'M d, yyyy' } });
data-toggle="datepicker"
on a sibling element.
Directive for bootstrap-timepicker (made by jdewit).
Requires bootstrap-timepicker.js
& bootstrap-timepicker.css
.
Add a timepicker to an input by appending a bs-timepicker
attribute.
Supports AngularJS validation out of the box.
timepicker: {{timepicker | json}}
<div class="control-group input-append"> <input type="text" ng-model="timepicker.time" bs-timepicker> <button type="button" class="btn" data-toggle="timepicker"><i class="icon-time"></i></button> </div>
data-toggle="timepicker"
on a sibling element.