I have a number of tabs that I handle special logic so no location bar address change should occur. I have the following
Home
This behaves as expected, i.e. it gives me the hand mouse pointer when hovering over the buttons but clicking on then starts the route change. I want to be able to stop this.
I tried just remove the href or setting href="", seemed to have some success but it gave unexpected results when hovering.
What is the best practice here? Do I have to remove the href? So then I will need to style the tab using CSS to give me the mouse pointer when hovering? If I do leave the href="#" in the link then this causes a change of routing which is not what I was looking for.
I actually handle my login in a ngClick for each tab. This logic must not change the route.
Any ideas?
Try doing:
Home
If you don't use the <base> tag, you can simply use:
Home
Indeed, according to the documentation:
[...] the default action is prevented when href attribute is empty.
Well, the documentation is wrong, and the real behaviour is actually to prevent the default action when the href attribute is equal to page location. That's a problem when you're using <base>. In this case, you have two choices:
Forget the href attribute. That works fine, but your page will not be valid anymore, since the href attribute is mandatory for a <a> tag.
Create your own directive, for instance aEmpty, whose goal is simply to fill the href attribute of a real <a> with the current value of $location.path().
In all cases, you'd better to actually use CSS to style your link, because that's always a bad idea to rely on the default behaviour of the browsers.
Replace href with ng_click.
To get the hand mouse pointer, add the css style:
a { cursor: pointer ; }
a:hover { color: #00c } /* user hovers */
Related
I'm working on editor where user can set link to another website , for example stackoverflow.com. If user set this url to <a> element and then click on this link he will be navigated to http://myapp.com/stackoverflow.com but not to http://stackoverflow.com. I supposed that this is caused by changed default behavior of element.
How can i make this link external? if user will copy url from browser and paste he will paste http://stackoverflow.com and hence everything will works fine. But in case he manually enter stackoverflow.com nothing will work fine.
P.s. i also would like to make each element with attribute target="_blank" so, i assume that i can't navigate programatically
Any ideas?
Try setting the <a>'s href attribute to the full url, not just stackoverflow.com:
<a href="http://stackoverflow.com" />
Otherwise it's treated as a relative url.
Add a check to see whether your users input the url as stackoverflow.com, and if they do, change it to http://stackoverflow.com before setting the href attribute.
Didn't get your other question about programmatic navigation, but if you want a link to open in a new window/tab, use
<a href="http://stackoverflow.com" target="_blank" />
I am clicking to modal window which is pretty simple. In general only relevant part is this:
<div id="partSelection">
<button value="0" name="partSelection">BLATNÍK P L</button>
<button value="1" name="partSelection">BLATNÍK P P</button>
I need to click one of this button, I know how to click this with:
xpath:
element(by.xpath('//*[#id="partSelection"]/button[2]')).click();
also way with button text:
element(by.buttonText("BLATNÍK P P")).click();
but I noticed there as different values for each button and I belieave this is something which is not going to change by developers. Is there a way how to click element base on value?
Thank you for your advises.
Adding to an existing answer.
You can solve it using the following CSS selector:
element(by.css("#partSelection button[value=0]")).click();
Or, using a by.xpath() locator:
element(by.xpath("//div[#id='partSelection']/button[#value='0']")).click();
Note that, if you are going to use the "by value" technique often, to follow the DRY principle, it could be a good idea to define a custom by.value() locator:
How to globally add a custom locator to Protractor?
this example should work if you want to just look up a specific attribute. I usually refer to this css selectors when I'm trying to figure out the best way to find a specific attribute.
basically the breakdown is to find the tag you want in our case we want button and then we want to find the attribute within that tag. So we have the choice of value or name. Name is the same for both buttons so we don't want to use that. However the value is different for each button so that would be good to use in this case.
element(by.ccs('tag[attribute=""]');
tag = button
attribute = value
element(by.css('button[value="0"]')).click(); // button with text BLATNÍK P L
element(by.css('button[value="1"]')).click(); // button with text BLATNÍK P P
I'm using angular-ui-router and have an issue with empty a tags, like href='#'. I'm using bootstrap, which makes extensive use of href='#' for dropdowns and such. The problem is if a user selects a dropdown item then the router interprets that as a state change, which in this case is to the home page.
Is there an easy way to stop this behavior without having to resort to changing all the href='#' to href=''.
Just remove the href tag completely from your anchor tag. It's still a perfectly valid tag without it.
Or if you're currently using ui-sref in the anchor tag, you could actually use the href attribute instead to go to the route that the state is mapped to.
you can use this, so you can preserve the link and basically do nothing when its clicked
<a ui-sref="state" href="javascript:void(0);">Your link</a>
I use this:
<a href-void>Click me! I don't do anything, but i'm still a link!</a>
I'm using Rangy in conjunction with AngularJS. Angular replaces href with ng-click, so calling a function becomes:
<a ng-click='theFunctionThatCallsRangy()'>Get Range</a>
Unfortunately,
range.commonAncestorContainer
is returning the node of the anchor instead of the selection:
<a ng-click='theFunctionThatCallsRangy()'>Get Range</a>
and
range.collapsed
returns true. This leads me to believe clicking the anchor responsible for generating the range is destroying the selection before the range can be created from the selection.
As soon as I modify the anchor to:
<a href='#' ng-click='theFunctionThatCallsRangy()'>Get Range</a>
the range is created as expected. However, adding href='#' causes Angular to redirect to the root domain ('/'). Swapping out <a> for <button> also works, however this breaks existing CSS.
Why is this happening? Does Rangy expect href to be present in anchor tags? Workarounds?
Rangy is only reporting what the browser tells it about the selection and has no opinion about whether the href attribute is present. As you correctly diagnosed, the problem is that when you click on an <a> element, the existing selection is destroyed by the time the click event fires. Assuming you continue using these <a> elements, your options are:
Use the mousedown event instead
Make the <a> element unselectable, which will obviously have its own consequences
Demo: http://jsfiddle.net/M6AAy/
I've just migrated to AngularJS 1.2. And I've realized that all my menu/navigation elements that were configured with data-toggle, for instance:
<li>Additional Selection</li>
are not working any more. They should toggle element with id="additionalSelection" - and this is how Angular & Bootstrap worked when I was using version 1.0.8 of Angular.
But now, when I click anchor element, Angular intercepts this click and tries to go to route additionalSelection and it causes page refresh...
Is there a way to fix it?
The solution is as simple as replacing href attribute with data-target. That solves the issue:
<li><a data-target="#additionalSelection" data-toggle="tab">Additional Selection</a></li>
As dragonfly pointed out, data-target works fine instead of href.
There is a small difference in CSS. When data-target is used vs href, the cursor is not a pointer anymore. If you don't want to add extra CSS, you can do the following:
Selection
This is just a suggestion, not an elegant solution. But if you want to use href for some reason, add onclick="return false;"
Simply replace href attribute from data-target
<li><a data-target="#switchTabs" data-toggle="tab">Tabs</a></li>
The solution preserving the cursor (while still relying on data-target instead of href to navigate) is:
<li>Additional Selection</li>
the addition of href causes the cursor to switch to the hand, but leaving it blank as "" doesn't cause any page reloads.