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>
Related
So, what I want to achieve is that the wrapping link I have to be clickable on all places, instead when the button is clicked don't call the function or click the item
<a href="test.com">
<img />
<title />
<button>
Add to Cart
</button>
</a>
First of all, mixing a link and a button isn't a good idea Can I nest a <button> element inside an <a> using HTML5?
Second of all use event.preventDefault()
I'm using material-ui as my css framework and I want to select button that contains a specific text.
My current code:
cy.get('button').contains('Edit Claim').should('be.disabled');
It fails because the button component of material ui outputs the text inside a div so cypress is asserting the disabled attr to the div. I want it to assert to the button.
Edit:
I solved it using cy.contains('button', 'Edit Claim').should('be.disabled');
On the Material-UI demo page the label is in a child <span> (not <div>),
<button class="MuiButtonBase-root MuiButton-root MuiButton-contained Mui-disabled Mui-disabled" tabindex="-1" type="button" disabled="">
<span class="MuiButton-label">Disabled</span>
</button>
but there may be variations - in any case, you can reference the button by adding .parent() to the test
cy.visit('https://material-ui.com/components/buttons/');
cy.get('button')
.contains('Disabled') // span is the subject
.parent() // move up to the button
.should('be.disabled');
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".
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.