When both, href and ng-click attributes are defined:
Sign out
the href attribute takes precedence over ng-click.
I am looking for a way to raise priority of ng-click.
href is required for Twitter Bootstrap, I can't remove it.
This example from the angular documentation site just does href without even assigning it to an empty string:
[<a href ng-click="colors.splice($index, 1)">X</a>]
http://docs.angularjs.org/api/ng.directive:select
You can simply prevent the default behavior of the click event directly in your template.
<a href="#" ng-click="$event.preventDefault();logout()" />
Per the angular documentation,
Directives like ngClick and ngFocus expose a $event object within the scope of that expression.
Here is another solution :
Sign out
i.e. Just remove the # from the href attribute
You should probably just use a button tag if you don't need a uri.
Just one more hint. If you need real URL (to support browser accessibility) you can do the following:
template:
<a ng-href="{{link}}" ng-click="$event.preventDefault(); linkClicked(link)">{{link}}</a>
directive:
$scope.linkClicked = function(link){
// your code here
$location.path(link);
};
In this way your code in linkClicked() will have chance to execute before navigating to the link
In Angular, <a>s are directives. As such, if you have an empty href or no href, Angular will call event.preventDefault.
From the source:
element.on('click', function(event){
// if we have no href url, then don't navigate anywhere.
if (!element.attr(href)) {
event.preventDefault();
}
});
Here's a plnkr demonstrating the missing href scenario.
This worked for me in IE 9 and AngularJS v1.0.7:
Logout
Thanks to duckeggs' comment for the working solution!
There are so many answers for this question here but it seems there is a bit of confusion about what's actually going on here.
Firstly, your premise
"href overrides ng-click in Angular.js"
is wrong. What is actually happening is that after your click, the click event is first handled by angular(defined by ng-click directive in angular 1.x and click in angular 2.x+) and then it continues to propagate(which eventually triggers the browser to navigate to the url defined with href attribute).(See this for more about event propagation in javascript)
If you want to avoid this, then you should cancel the event propagation using the The Event interface's preventDefault() method:
<a href="#" ng-click="$event.preventDefault();logout()" />
(This is pure javascript functionality and nothing to do with angular)
Now, this will already solve your problem but this is not the optimal solution. Angular, rightfully, promotes the MVC pattern. With this solution, your html template is mixed with the javascript logic. You should try to avoid this as much as possible and put your logic into your angular controller. So a better way would be
<a href="#" ng-click="logout($event)" />
And in your logout() method:
logout($event) {
$event.preventDefault();
...
}
Now the click event will not reach the browser, so it will not try to load the link pointed by href. (However note that if the user right clicks on the link and directly opens the link, then there won't be a click event at all. Instead it will directly load the url pointed by the href attribute.)
Regarding the comments about visited link color in the browsers. Again this has nothing to do with angular, if your href="..." points to a visited url by your browser by default the link color will be different. This is controlled by CSS :visited Selector, you can modify your css to override this behaviour:
a {
color:pink;
}
PS1:
Some answers suggest to use:
<a href .../>
href is an angular directive. When your template is processed by angular this will be converted to
<a href="" .../>
Those two ways are essentially the same.
Just write ng-click before href ..It worked for me
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.5.0" data-semver="1.5.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script>
angular.module("module",[])
.controller("controller",function($scope){
$scope.func =function(){
console.log("d");
}
})</script>
</head>
<body ng-app="module" ng-controller="controller">
<h1>Hello ..</h1>
<a ng-click="func()" href="someplace.html">Take me there</a>
</body>
</html>
I don't think you need to remove "#" from href. Following works with Angularjs 1.2.10
Logout
You can also try this:
<div ng-init="myVar = 'www.thesoftdesign'">
<h1>Tutorials</h1>
<p>Go to <a ng-href="{{myVar}}">{{myVar}}</a> to learn!</p>
</div>
I'll add for you an example that work for me and you can change it as you want.
I add the bellow code inside my controller.
$scope.showNumberFct = function(){
alert("Work!!!!");
}
and for my view page I add the bellow code.
<a href="" ng-model="showNumber" ng-click="showNumberFct()" ng-init="showNumber = false" >Click Me!!!</a>
Did you try redirecting inside the logout function itself? For example, say your logout function is as follows
$scope.logout = function()
{
$scope.userSession = undefined;
window.location = "http://www.yoursite.com/#"
}
Then you can just have
<a ng-click="logout()">Sign out</a>
Please check this
Logout
$scope.logout = function(event)
{
event.preventDefault();
alert("working..");
}
//for dynamic elements - if you want it in ng-repeat do below code
angular.forEach($scope.data, function(value, key) {
//add new value to object
value.new_url = "your url";
});
<div ng-repeat="row in data"><a ng-href="{{ row.url_content }}"></a></div>
This works for me
<a href (click)="logout()">
<i class="icon-power-off"></i>
Logout
</a>
<a href="#">
<span ng-click="logout()"> Sign out </span>
</a>
I did like this and it worked for me.
Related
I am new to stackoverflow and I want some quick help here. Actually I am in learning phase now and I want to know how to visit a new page on button click. Like <a href='mypage'></a> That means, if I am on page 1 I want to go to page 2.
FOR EXAMPLE:
if we use anchor tag and add href value it will redirect us to new page
<a href='mypage'>Click ME</a>
But i need to know if we use button how can i redirect to specific page like anchor tag!
How can I achieve this?
Sorry if this requirement is too low for you, but its kind of first step to me.
Any help would be appreciable.
Thanks!
Way 1 :
<button onclick="location.href = 'www.example.com';">www.example.com</button>
Way 2 :
<button id="button">www.example.com</button>
<script type="text/javascript">
document.getElementById("button").onclick = function () {
location.href = "www.example.com";
};
</script>
Try in this way.
<input type='button' value='redirect' class="btn" onclick="document.location.href='www.google.com';"/>
You can either:
Wrap button tags with <a href>
<a href='mypage'><button>Click ME</button></a>
Wrap <a href> with button tags
<button><a href='mypage'>Click ME</a></button>
In my component I subscribe some basic data:
ngOnInit() {
this.data.getBasics().subscribe(
data => {
this.basics = data
}
)
}
I use them in html like this:
<h1>{{ basics.surname }}</h1>
and it works perfectly fine. A few of basics are the links. Assume basics.mypage to be "http://mypage.com". I would like to use it as a href in my html document. Something like this:
<a href={{ basics.mypage }}>Go to my page</a>
but that way it sends me to
http://localhost:4200/%7Bbasics.mypage%7D
How to use this variable inside tag?
Just insert {{basics.mypage}} into quotes
Go to my page
Use ng-href:
<a ng-href={{ basics.mypage }}>Go to my page</a>
or check that the data is properly formatted.
Another way is also available thats called property binding.
<a [href]="variableName"></a>
or
<a [attr.href]="variableName"></a>
Always prepend your absolute external links with protocol or // shortcut for http:// OR https:// depending on your app's protocol.
<div class="inline-icon-text">
<small class="text-muted d-md-none mr-3">Link</small>
<a [attr.href]="'//' + candidate.url" target="_blank" [title]="candidate.url">
<i class="material-icons">open_in_new</i>
</a>
</div>
Browsers treat URLs as a relative by default to facilitate in-app navigation.
As a side note, this behavior is not Angular-specific; other frameworks and plain sites behave exactly the same.
This also a great way of doing that.
Use this instead.
<a ng-href={{basics.mypage}}>Go to my page</a>
This is what I can gather from the Angular API here: Angular ngHref
I am used to using href="#" during development as placeholder links so that if you accidentally click on it, nothing happens and it will not jump the page around while testing the page i.e. you know exactly which is a placeholder and which is a broken link.
However, When baseurl is defined in the head, href="#" fetches the baseurl address instead of the current page and appends the # at the end. This causes placeholder links to load the index page always. Annoying.
<!doctype html>
<html>
<head>
<base href="http://localhost">
</head>
<body>
<p>placeholder # only</p>
<p>empty string</p>
</body>
</html>
Is there a way to get back the "placeholder" behavior other than specifying the full path in the <a>'s href?
href="javascript:void(0);"
try this, so onclick the page wont jump nor will it be refreshed
This might be more of a hack than anything but you could always just ignore clicks from anchor tags:
$('body').on('click', 'a[href="#"]', function(e) { e.preventDefault(); });
If you are currently in development I suggest removing your base tag.
It defines the behavior of all the anchor tags on that page. For more information :
http://www.w3schools.com/tags/tag_base.asp
do it with javascript:
function onClick(event) {
document.getElementById('id').scrollIntoView({
behavior: 'smooth'
});
}
https://stackoverflow.com/a/48901013/4185912
I use bootstrap 3 popover.
And now I would like link on text popvover.
Code:
<a href="#"
role="button"
class="btn popovers"
data-toggle="popover"
title=""
data-content="test content link on content"
data-original-title="test title"
>
test link
</a>
But when I start code in html I see:
link on content
"
data-original-title="test title"
>
test link
I know that problem in symbol " but i don't know have add link in link...
Tell me please how will be aright code?
P.S.: if question already exist please give me link.
You'll need to pass html option with value true while initializing popover like following.
Demo
JS:
$("[data-toggle=popover]")
.popover({html:true})
HTML:
test link
Simply use the attribute data-html="true".
<button
data-toggle="popover"
data-content="Link: <a href='xyz.com'>XYZ</a>"
data-html="true">
CLICK
</button>
I used data-trigger="focus" and had an issue with a link in content of popover. If mouse button is clicked on the link and hold for a while then the popover disappears and the link 'doesn't work'. Some clients complained about that.
HTML
test link
JS
$("[data-toggle=popover]").popover({html:true})
You can reproduce the problem here.
I used the folowing code to fix the issue:
data-trigger="manual" in html and
$("[data-toggle=popover]")
.popover({ html: true})
.on("focus", function () {
$(this).popover("show");
}).on("focusout", function () {
var _this = this;
if (!$(".popover:hover").length) {
$(this).popover("hide");
}
else {
$('.popover').mouseleave(function() {
$(_this).popover("hide");
$(this).off('mouseleave');
});
}
});
If you want to use focus and a link inside the popup you need to prevent the popup to close when clicking inside. The cleanest solution I found was to preventDefault clicks inside a Popup which has the .popover class
$('body')
.on('mousedown', '.popover', function(e) {
e.preventDefault()
});
});
<i class="glyphicon glyphicon-info-sign"></i>
By simply adding data-html="true" is working with link attribute :)
Its worth noting that whilst the answers given are correct - a link will cause problems when the data-trigger="focus" is applied. As I found out from a client if the click occurs quickly on a popover the link will be actioned, should a user hold down their mousebutton then unfortunately the trigger kicks in and the popover occurs. So in short consider whether a link is necessary and plan for slooow clicks.
$("body").on("mousedown",".my-popover-content a",function(e){
document.location = e.target.href;
});
does it for me: basically, take matters into your own hands. Again, this is with popover options html: true, sanitize: false, and trigger : "focus"
I would like to create an HTML button that acts like a link to an item on the same page. So, when you click the button, it redirects to item on the same page.
How can I do this? (I would limit the solution to HTML, CSS, and JavaScript, because currently I am not using any other language)
Current Button (Bootstrap):
<a class="btn btn-large btn-primary" href="">Democracy</a>
Try:
<button onclick="window.location.href='location'">Button Name</button
This is assuming that you are not talking about scrolling down to a regular anchor, and instead you want to scroll to actual HTML elements on the page.
I'm not sure if jQuery counts for you, but if you're using Bootstrap, I imagine it does. If so, you can bind to the "click" event for your button and put some javascript code there to handle the scrolling. Typically you might associate the link/button with the element you want to scroll to using a "data" attribute (e.g. data-scroll="my-element-id").
Without jQuery, you'll have to make a function that contains the code as described, and put in an onclick attribute that references your function, and passes "this" as a parameter to your function, so you can get the reference to the link/button element that called it.
For the code to use to actually scroll to the corresponding element, check out this article:
How to go to a specific element on page?
Quick example without jQuery:
<a class="scrollbutton" data-scroll="#somethingonpage"
onchange="scrollto(this);">something on page</a>
<div id="somethingonpage">scrolls to here when you click on the link above</a>
<script type="text/javascript">
function scrollto(element) {
// get the element on the page related to the button
var scrollToId = element.getAttribute("data-scroll");
var scrollToElement = document.getElementById(scrollToId);
// make the page scroll down to where you want
// ...
}
</script>
With jQuery:
<a class="scrollbutton" data-scroll="#somethingonpage">something on page</a>
<div id="somethingonpage">scrolls to here when you click on the link above</a>
<script type="text/javascript">
$(".scrollbutton").click(function () {
// get the element on the page related to the button
var scrollToId = $(this).data("scroll");
var scrollToElement = document.getElementById(scrollToId);
// make the page scroll down to where you want
// ...
});
</script>
Note: If you literally want a "button" rather than a "link", you can really use any element and make that clickable, e.g.:
<button class="scrollbutton" data-scroll="#somethingonpage">something on page</button>
hey try this : -
<button>Click Me</button>
then to which ever place you want to go in your site : -
u may just place the line below wherever you want,
<a name="A"></a>
hope it works for you
Bookmark your item on the same page that you want to redirect to by assigning it an id. Assume id="itemId", then use<a class="btn btn-large btn-primary" href="#itemId">Democracy</a>. When you click the button, you will be redirected to the part of the page containing that item.
Read More
<section id="sectionA">
<p>You will be directed to this section. You can use id inside div/section/p tags etc</p>
</section>
which section or div using same id in <a href="?">
Democracy
div or section eg:
<section id="democracy">
your content
</section>
try this method abosolutly work
This is the easy way to do it
<button type="button""> Click </button>
try this following code :
<button>Click Over Here</button>
then to which ever place you want to go in your site u may just place the line below wherever you want :
<a name="Link"></a>