Anyone had a problem on modal on mobile browser if you add ng-click in it? if I remove the ng-click, modal works perfectly fine but If I add the ng-click modal wont work on mobile browsers. Any alternatives or idea how to fix it?
Here's the Fiddle --> https://jsfiddle.net/franc0neil/8dry5e3L/5/
Thanks
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" ng-click="vm.dataReset()">
With Click
</button>
Related
I am trying to implement popover functionality using Bootstrap & angularJS but popup doesn't seem to work & i don't get any errors either. Any help would be highly appreciated
<button popover-template="'popover.html'"
popover-placement="top"
popover-trigger="click"
type="button"
class="btn btn-default">
Mouse over me
</button>
I added ngAnimate & ui.bootstrap as a dependent to my angular application. Here is the code for the popover.html
<label class="Label">
test
</label>
It doesn't acually create a popover on click & doesn't create an error message either.
The name of the directive is uib-popover-template:
<button ̶p̶o̶p̶o̶v̶e̶r̶-̶t̶e̶m̶p̶l̶a̶t̶e̶=̶"̶'̶p̶o̶p̶o̶v̶e̶r̶.̶h̶t̶m̶l̶'̶"̶
uib-popover-template="'popover.html'"
popover-placement="top"
popover-trigger="click"
type="button"
class="btn btn-default">
Mouse over me
</button>
For more information, see
Angular UI Bootstrap Directive API and Demo - Popover
For more information, see
How to launch a modal in angularjs when routeprovider is used.
$('#loginmodal').modal("show");
throws an error when used with routeprovider but works when launched in an individual page. Help me
It seems you are using Jquery in angular-js.
I would prefer to use the uib-modal. It is a twitter bootstrap modal written completely in angularJS.
You are trying to open the modal using jQuery which is not advisable.
Suggesting you not to trigger the modal in the angular function.
<button type="button" class="btn btn-info btn-lg"
ng-click="modalClicked()"
data-toggle="modal" data-target="#myModal">Open Modal</button>
Here is a Plunker to help
I've been trying to use angular-ladda and only seeing a blank button when it should show the spinner icon:
All css and modules are loaded properly.
Here's the code used in the HTML:
<button ladda="news.working" class="ladda-button btn btn-primary" data-style="zoom-in" ng-click="news.setup()">
Update Settings
</button>
Any thoughts?
As it turns out, the simple fix is to add data-spinner-size as an attribute to the HTML:
<button ladda="news.working" class="ladda-button btn btn-primary" data-style="zoom-in" data-spinner-size="25" ng-click="news.setup()">
Update Settings
</button>
I'm using Angular Bootstrap and want to have my tooltips trigger using a "hover" on desktop and "click" on mobile devices which can't hover but also have the tooltips close if you click outside the tooltip. I set it to tooltip-trigger="hover outsideClick" since "outsideClick" is now a supported trigger (https://github.com/angular-ui/bootstrap/tree/master/src/tooltip/docs), however this breaks the tooltip completely so even the hover doesn't work.
<span class="glyphicon glyphicon-info-sign" tooltip-trigger="hover outsideClick" uib-tooltip="Tooltip text here"></span>
Is there any way to make these work together?
If I just use tooltip-trigger="hover click" it's decent, but on mobile I can only close the tooltip by clicking the item again, versus being able to click elsewhere on the page to close it.
Have you tried tooltip-trigger="mouseenter outsideClick"?
It seems likehover is not mentioned in the doc.
I think what you're looking for is the tooltip-trigger="hover focus", the focus will act as the outsideClick, closing the tooltip on the next click that the user makes. I've personally used this and it works great both for mobile and desktop.
It actually defaults to hover focus so you shouldn't even have to add them manually.
If there is any chance you can use the native bootstrap library? As it supports what you are looking for by default.
I have created a jsfiddle demonstrating this(please view it on your mobile device to see the tootlips working as expected)
HTML:
<div class="row">
<div class="col-md-12">
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
</div>
</div>
JS:
$(function() {
$('[data-toggle="tooltip"]').tooltip()
});
You can read up on it here, as a side note, you have to manually enable the tooltip
For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning you must initialize them yourself.
One way to initialize all tooltips on a page would be to select them by their data-toggle attribute:
I am testing angularJS and ui-bootstrap tooltips :
http://angular-ui.github.io/bootstrap/#/tooltip
What I want to achieve is a tooltip with some working buttons inside.
I have tried :
<input type="text" value="{{activity.name}}"
tooltip-html-unsafe='<button class="btn btn-primary btn-mini" ng-click="addChild(activity)">+</button>
<button class="btn btn-danger btn-mini" ng-click="remove(activity)">X</button>
<button class="btn btn-danger btn-mini" ng-click="removeChildren(activity)" ng-show="activity.children.length > 0">X children</button>'
tooltip-trigger="focus"
tooltip-placement="right" />
Which is ugly and does not work. The buttons are rendered but do not execute the 'ng-click'.
Is there some way I can tell the tooltip to fetch a partial and keep the ng-click functional ?
Tooltips that would contain "live" HTML (with AngularJS directives working etc.) are not supported in the current (0.5.) version of http://angular-ui.github.io/bootstrap/#/tooltip
You might want to open a feature request for this in https://github.com/angular-ui/bootstrap/issues?state=open