I want my a modal popup before my ng-click gets executed. But only the ng-click is executing, no pop up is displaying.
<a class="btn btn-primary" data-toggle="modal" data-target="#addNewMapping" ng-click="onClickGenerate()">Generate Document</a>
addNewMapping is a div on the same view and onClickGenerate is a method on the correspnding controller.
I ended up displaying a modal popup using data-target and in the modal popup added a button to handle the ng-click event.
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 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.
I'm trying to use UI Bootstrap's modal dialog, inside an Angular controller, rendered inside an Asp MVC View.
Somewhere within the page, I embed modal div :
<div class="modal inmodal" id="newActivityModal" tabindex="-1" role="dialog" aria-hidden="true">
which is triggered by:
<button ng-disabled="vm.activityInputText.length == 0" type="submit" class="btn btn-sm btn-primary" data-toggle="modal" data-target="#newActivityModal">
So the structure of the page is :
<!-- ng-module="xxx" -->
...
<!-- ng-controller="zzz" -->
...
<!-- button triggering modal -->
....
<!-- modal -->
The problem however is that when the page renders, the modal window div 'jumps out' of the div where it originaly was (inside the controller) and appears at the very bottom of the page, right before the body tag.
Since inside the modal I'm using {{}} bound to controller's scope, it breaks.
Am I doint this right ?
Funny fact : if I instead put this all (the controller, button, modal window etc.) inside an <ng-view> it works fine and modal stays where it was in the DOM.
I want to load a modal using custom directive when a hyperlink is clicked. but the thing is that hyperlink already defined a ng-click function. Current ng-click function also should work my requirement. How can I do it without changing the ng-click function? Below is my hyperlink.
<a href="#" class="book-btns add-to-cart" data-ng-click="service.addToCart(hotel)" >Add to cart & Continue> </a>
href="javascript:;" should work to disable the default link behaviour.
Create the custom directive so that it binds to "click" on the element.
I want to use the drop down button in my application and I'm using angularjs. When I click the drop down button and click away, I want the drop down list to disappear.
In angular, there's an ng-blur directive for this. I added the ng-blur to my button. When I click something in the drop down list, it seems to trigger the ng-blur.
I cannot click the things inside drop down list. I tried to add a div outside and add ng-blur for this whole div but it still didn't work. I'm not using angularstrap bs-select, ng-options as I want to make datacalls when I select in the drop down list. How can I implement the click away function for the drop down button? Not necessary to use ng-blur.
Thanks.
<div class="btn-group">
<button type="button" class="btn btn-default" ng-blur="closedropdownlist">Default</button>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div>
Here's the Plunker Demo for it, http://plnkr.co/edit/OuiZqajYD3ZdrOwSLLSn?p=preview
I'd like for the dropdown list to disappear when I click away from the dropdown button. I also want to enable the ng-click function inside the dropdown list. So I'm not using the ng-options and ng-model.
In reference to the following stackoverflow: Using ng-blur and ui-sref doesn't work as expected, it seems that the click event happened before the blur event. To trigger the click event before blur event, I could use ng-mousedown and this happened before the blur event. And my problem is solved.