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
Related
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>
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
I have a bootstrap popover which has 2 buttons Yes or No. Based on the response from the user i need to call AngularJS service function. How do i do that??
Popover is created only if it meets a certain criteria (like existence of duplicate records)
HTML code looks something like below, but currently doesn't have 2 buttons & still need to work on it
$(document).ready(function () {
if (DuplicateRecord) {
$('[data-toggle="popover"]').popover();
}
});
<button href="#" data-toggle="popover" title="Popover Header"
data-content="Some content inside the popover" data-trigger="click"
data-html="false" data-placement="left">
Toggle popover
</button>
Looks like you are mixin concepts (or maybe I'm not getting your question), you can have a popover but the data-trigger="click" makes showing the popover on the click event and you wanna use that event to call the service method. Change the popover trigger to hover and then use the click event to call your service. Something like this just as an idea, the snippet is not tested.
<button
type="button"
data-toggle="popover"
title="Popover Header"
data-content="Some content inside the popover"
data-trigger="hover"
data-html="false"
data-placement="left"
ng-click="$ctrl.callSomeMethod()"
>
Toggle popover
</button>
You can take a look to UI Bootstrap lib which has a directives for the Bootstrap's components equivalents.
The AngularJS ng-click event isn't fired in a Boostrap popover.
<button id="delAnnot" type="button" class="btn btn-default"
data-toggle="popover" data-html="true" data-placement="bottom" data-content="
<button type='button' class='btn btn-danger' ng-click='vm.removeAnnotation(scenevm.sharedService.curAnnotation.ID)'>delete</button>">
<span class="glyphicon glyphicon-trash"></span>
</button>
I initialized my popover with a container so that the popover is within my angular controller:
$(".btn").popover({
placement: 'bottom',
trigger: 'click',
container: '#sceneCtrl'
})
For sure 'ng-lick' is not going to work try 'ng-click'. You can try as well using bootstrap directives http://angular-ui.github.io/bootstrap/ instead doing that in jQuery way.
Regards
Sylwester
Checkout this thread: AngularJS ng-click broken inside a popover
And here is the code that worked for me:
//Initialize & config popover controls
$('[data-toggle="popover"]').popover({ html : true })
.click(function(ev) {
//this is workaround needed in order to make ng-click work inside of popover
$compile($('.popover.in').contents())($scope);
});
And don't forget to include $compile and $scope as dependency in your module.
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