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.
Related
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 use collapse plugin from Bootstrap, and i also want to change class for another element accordingly (change class of fa-icon).
I also use AngularJS and i liked the idea of using condition in ngClass like this:
<i ng-class="collapsableItemId.hasClass('in') ? 'fa-chevron-up' : 'fa-chevron-down'">
When item is not collapsed bootstrap adds in class to it. I want to try to change icon based on class presence in collapsable item, but did not succeed in it. In bootstrap manual there is also mentioned that collapse generates events which i could probably use, but i also do not know how.
It should work like this. Use ng-click on the collapse toggle element to change some other scope var and then use that var in the ng-class of the icon..
<a href="" data-toggle="collapse" data-target=".collapse" ng-click="isOpen=!isOpen">
<i class="fa" ng-class="(isOpen) ? 'fa-chevron-up' : 'fa-chevron-down'"></i>
</a>
<div class="collapse in">
I'm the collapsible element.
</div>
http://www.bootply.com/nqLf22HCli
<i ng-class="{'fa-chevron-up': abc.isOpen ,'fa-chevron-down': !abc.isOpen }"></i><div ng-show="abc.isOpen">Hi..This div will be show hide and icon will be change accordingly</div>
Use ng-click on collapsing header and put that div which you want to collapse
add ng-show="abc.isOpen".
Please, consider the following example for understanding my question:
<button ng-class="$scope.controllerMethod($thisButton)" />
In my controllerMethod, I want to get a reference of the button who called ng-class. Is it possible?
(Something like passing $event.target in the ng-click button, so I can read the caller from the controller).
Any helps? Thanks!!
If you're hard coding each of your button in your menu, you won't need ng-class. Simply ng-click=doSomething('$event'), then the rest is just like your normal Javascript, do whatever you want with $event.target.
If you want do it the angular way, each button needs to have a corresponding model in the controller.
<ul>
<li ng-repeat='btn in buttons'>
<button ng-class='{"highlight":btn.clicked}' ng-click='doSomething(btn)'></button>
</li>
</ul>
In your controller:
$scope.buttons = [{text:'button1'},{text:'button2'}];
$scope.doSomething = function(btn){
btn.clicked = true;
}
In this example, ng-class will watch each button's clicked property, if it's true, then add highlight class onto this button.
I am using the Popover AngularStrap using the trigger focus on a . The problem is that this trigger just works in a button element, however, the rest of the triggers can be used in a , Is there a way to make it works in a image?
Is this what you are looking for?
<a href="javascript:" title="{{popover.title}}" data-content="{{popover.content}}" data-template="popover/docs/popover.tpl.demo.html" data-animation="am-flip-x" bs-popover>
<img src="/my/image/path" />
</a>
i got the following structure:
<div directiveA>
<a href="" directiveB>
</div>
Both directives got an onclick event. The problem is, that if a click on directiveB is performed, a click on directiveA is triggered as well.
How can i prevent this?
Thanks
In the directiveB on the click directive do this this
ng-click=doSomething();$event.stopPropagation()
There is an $event object available for all DOM events supported by angular.