I have a click button. I am trying with angularjs. The page anchors at the top of the page, when I click it. How do I to stay at the same place in the browser when I click it?
<a href="#" ng-click="myFunction()">
{{_actions.refresh}}
</a>
There is a similar question here. But with jQuery solution described there. I would like to find a solution with angularjs.
<a ng-click="myFunction()">
{{_actions.refresh}}
</a>
Just remove href completely.
So, the "right" way to do it would be something like this:
<a name="myFunction"></a>
<a href="#myFunction" ng-click="myFunction()">
{{_actions.refresh}}
</a>
That way you could have some extra functionality in terms of someone sending that link, or someone visiting the page without JavaScript (have you thought about that experience yet?).
I obviously don't know your applications, but putting a name tag in there might be a helpful thing on several levels.
Related
I've built a site with Hugo and using featherlight.js for pop-up lightbox. All working fine when hosted locally. But on the live version I'm having a weird issue where the links inside the pop-up are not working.
A full reproducible example is difficult, but I'll provide the relevant code and perhaps someone can identify what's likely causing the problem or tell me what other info they need.
Relevant code calling featherlight:
<a class="search-icon" href="#" data-featherlight="{{ .link | safeURL }}" > <i class="ti-search"></i> </a>
Where .link is html file compiled from markdown.
If I navigate directly to .link the content shows up fine, and the links in the content are fine, e.g.,:
<p>See more here </p>
But inside the pop-up lightbox, links in the content appear like this:
<p>See more here</p>
i.e., 'here' is outside the </a> tag.
This particular link uses Hugo code:
<p> {{.Params.Link_text}} <a href="{{ .Params.Link | absURL }}" > here </a> </p>
But the same thing occurs for the links written with Markdown.
A featherlight.js bug or something else?
It works after replacing this "https://code.jquery.com/jquery-latest.js" with "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js".
I try to create simple functionality: user is clicking on image and he is redirecting to another page. From now I now that I can use "Link to" but it applies to inline elements. What if I need to use graphic element (picture/icon) instead? I've used the link also to it but it needs to another styling and I'm not quite sure if it is a good practice to use "Link to" for pictures ? It works fine but I would be grateful for answer because of my doubts.
<div className="wrapper"><Link to='/bag'><img id="shop" src={shopping_bag} /></Link>
<h6 id="sum">{this.state.total}</h6>
</div>
Using ionic 1 I'm having problems with creation <ion-checkbox> elements inside an <a> tag.
I know it's best to avoid nesting objects inside an anchor tag, however this is currently something I cannot do anything about.
Basicly my problem is this:
<a>
<ion-checkbox>Test</ion-checkbox>
</a>
I've made a fiddle to demonstrate. If you remove the anchor tag, everything works.
How can I solve this problem, without removing the <a> tag?
I've tried using the ng-click directive to $event.stopPropagation(), but that doesn't solve the problem.
You can try this:
<a href="javascript:void(0);">
<ion-checkbox>Test</ion-checkbox>
</a>
In an Angular app, I have a list of hyperlinks that need to have the following behavior:
if a certain condition is present (e.g. if a certain cookie has value x), a click on the hyperlink should open a modal window;
if this condition is not met (e.g. if the cookie has value y), the hyperlink should act in its usual manner and open the link in a new tab.
The hyperlinks are formatted as follows:
<a ng-href="{{article.url}}" target="_blank" ng-click="myFunction()">
{{article.title}}
</a>
I am puzzled by how to implement such a behavior. If I leave both ng-href and ngclick directives, then ng-href will insert the url and every click will open a page in a new tab. If I remove the ng-href directive, then the only way to open a link in another tab will be through javascript, but this is prevented by most browsers. I couldn't think of a way to make ng-href conditional (for example, writing <a ng-href="myCondition === true ? {{article.url}} : '#'"> doesn't work).
Could you please suggest a way of how to implement such a functionality in Angular?
This worked for me
<a ng-href='{{(element.url.indexOf("#")>-1) ? element.url : element.url + "client_id="}}{{credible.current_client_info.client_id}}'>{{element.title}}</a>
Here is a bit different approach that worked for me, didn't use ng-href at all:
HTML:
<a ng-click="myFunc()">{{article.title}}</a>
Controller:
$scope.myFunc = function() {
if (myCondition){
window.open($scope.article.url,'_self',false);
}
window.open("/#/",'_self',false);
};
Here is what I came up with. It looks kind of ugly, so if you have better suggestions, they are very welcome:
I wrote two separate anchor tags with different behaviors and made Angular choose between them depending on whether or not the necessary condition is met:
<a href="#" ng-if="checkCookies() === 'show popup'" ng-click="openArticle(article)">
{{$parent.article.title}}
</a>
<a ng-href="{{$parent.article.url}}" target="_blank" ng-if="checkCookies() === 'no popup'">
{{$parent.article.title}}
</a>
And in the javascript file, I wrote the checkCookies() function that looks up the value of the particular cookie.
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>