I have an issue with the <a href="#"> in my AngularJS app.
My main issue is on the:
<em class="fa fa-bars"></em>
navigation.html -> this is a template of navigation directive.
<nav class="sidebar col-xs-12 col-sm-4 col-lg-3 col-xl-2 bg-faded sidebar-style-1">
<h1 class="site-title"><em class="fa fa-rocket"></em> Brand.name</h1>
<em class="fa fa-bars"></em>
<ul class="nav nav-pills flex-column sidebar-nav">
<li class="nav-item"><a class="nav-link active" href="index.html"><em class="fa fa-dashboard"></em> Dashboard <span class="sr-only">(current)</span></a></li>
</ul>
<em class="fa fa-power-off"></em> Signout</nav>
index.html
<body ng-app="test" class="body-bg" ng-style="bgimg" ui-view>
</body>
app.js
var app = angular.module("test", ["ui.router");
app.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('/');
$stateProvider
// login route
.state("login", {
url:"/",
controller: "LoginController",
templateUrl: "pages/login/login.html"
})
// admin route
.state("admin", {
url:"/admin",
controller: "AdminController",
templateUrl: "pages/admin/admin.html"
})
And currently I am doing a SPA routing using ui-sref of ui-router.
The problem is everytime I click the button, I get redirected to the default state $urlRouterProvider.otherwise('/');.
How I can do something similar to that HTML href="#" with AngularJS ui-sref?
Or is there other ways?
from the code in the question I can say that, the normal usage of href will result in redirection so you need to use data-target, can you please try this?
<a data-target="#menu-toggle" data-toggle="collapse" class="btn btn-default"><em class="fa fa-bars"></em></a>
JSFiddle: here
if you have jQuery (which you probably do)
inside your head tag...
<script>
$(document).ready(function(){
$('[href="#menu-toggle"]').click(function(event){
event.preventDefault();
})
});
</script>
Basically keeps the link from routing via window navigation.
You can easily test by pasting this code into your browser console..
$('[href="#menu-toggle"]').click(function(event){
event.preventDefault();
})
You can use a combination of href and ng-click to solve your problem.
<em class="fa fa-power-off"></em> Signout</nav>
Where signOut() is a function on your controller.
1.Just remove the href tag completely from your anchor tag. It's still a perfectly valid tag without it. (or) href="javascript:void(0);"
for your reference: Angular-UI-Router: should i avoid href with ui-router?
Related
My simple jQuery function works fine if I click an anchored link on page-1 (body turns black fine) BUT if I have the same anchored link on another page-2 to link back and anchor to my page-1 the function doesn't work? It goes back to page-1 fine but body on page-1 doesn't turn black as expected?
HTML on page-1:
<div id="offcanvas">
<a href="#key-features" class="nav-link">
<span>Key features</span>
</a>
</div>
HTML on page-2:
<div id="offcanvas">
<a href="page-1.htm#key-features" class="nav-link">
<span>Key features</span>
</a>
</div>
jQuery:
$("#offcanvas a").click(function(){
$('.offcanvas').offcanvas('hide');
$("body").css('background-color', '#000000')
});
Many thanks in advance for your help.
B]
So I manage to find the solution, this works:
$("#offcanvas a").on("click", function() {
if (window.location.hash) {
$("body").css('background-color', 'black');
}
:)
please use below html structure
you have not define id on html structure
<div id="offcanvas">
<a href="#key-features" class="nav-link">
<span>Key features</span>
</a>
</div>
I have two views and each view contains an link with data-action attribute to call jQuery function called toggle menu like this:
<div id="hide-menu" class="btn-header pull-right">
<span>
<a href="javascript:void(0);" class="toggleMenu" data-action="toggleMenu" title="Collapse Menu")">
<i class="fa fa-reorder"></i>
</a>
</span>
</div>
jQuery:
toggleMenu: function () {
if (!$.root_.hasClass("menu-on-top")) {
$('html').toggleClass("hidden-menu-mobile-lock");
$.root_.toggleClass("hidden-menu");
$.root_.removeClass("minified");
} else if ($.root_.hasClass("menu-on-top") && $.root_.hasClass("mobile-view-activated")) {
$('html').toggleClass("hidden-menu-mobile-lock");
$.root_.toggleClass("hidden-menu");
$.root_.removeClass("minified");
}
}
one of the views calls the function properly but the another doesn't, What is the possible reason for that??
in fact I haven't known the actual reason of the issue, maybe as Ramesh said in the comments was the problem.
I solved it by putting the function in the same document (not in another js file) and in the element, I have used onClick attribute to execute the function.
<div id="hide-menu" class="btn-header pull-right">
<span>
<a href="javascript:void(0);" class="toggleMenu" onclick="toggle()" title="Collapse Menu">
<i class="fa fa-reorder"></i>
</a>
</span>
</div>
<script>
function toggle() {
if (!$.root_.hasClass("menu-on-top")) {
$('html').toggleClass("hidden-menu-mobile-lock");
$.root_.toggleClass("hidden-menu");
$.root_.removeClass("minified");
} else if ($.root_.hasClass("menu-on-top") && $.root_.hasClass("mobile-view-activated")) {
$('html').toggleClass("hidden-menu-mobile-lock");
$.root_.toggleClass("hidden-menu");
$.root_.removeClass("minified");
}
}
</script>
We upgraded from Angular 4 to Angular 8.1 and a lot of our drop downs are broken. From what I can tell they all contain these two style classes: the class js-dropdown and js-dropdown-menu. We can't find where these style classes are coming from or how they work. It's hard to search these terms on google because there's no way to have a must-include for hyphens, that I know of. Here's an example of the html:
<div class="select-wrapper" id="searchOption">
<li class="dropdown nav__item is-parent" tabindex="0" style="outline: 0" (blur)="closeDropdown($event)">
<div class="select-dropdown js-dropdown">
<span class="selection">{{ searchType }}</span>
<i class="nav__icon nav__icon--dropdown"></i>
</div>
<ul class="details-search nav__menu js-dropdown-menu">
<li (click)="optionSelected($event, 1)">
<a class="nav__link">Option 1</a>
</li>
<li (click)="optionSelected($event, 2)">
<a class="nav__link">Option 2</a>
</li>
<li (click)="optionSelected($event, 3)">
<a class="nav__link">Option 3</a>
</li>
</ul>
</li>
</div>
Does anyone have any insight to the class js-dropdown and js-dropdown-menu and how to fix them after this upgrade?
Update: so i think i found out where the js-dropdown style class comes from.... it doesn't come from any style... it's just used as a label and component.js looks for that label to show or hide it. The now is that component.js function isn't getting called. Anyone know how to fix this?
$('#app-container').on('click', '.js-dropdown, .js-dropdown-menu > *', function(event){
event.preventDefault();
var that = this;
var parent = $(this).closest('.is-parent');
//is our dropdown open?
if(!parent.hasClass('is-open')){
//... then open it.
parent.addClass('is-open');
//handle clicking away
$(document).one('click', function closeMenu(docEvent){
//if the parent does not contain the clicked element...
if($(parent).has(docEvent.target).length === 0) {
//close it.
parent.removeClass('is-open');
} else {
// else, set up another listener to check the next user click.
$(document).one('click', closeMenu);
}
});
} else {
// ...else we close it.
parent.removeClass('is-open');
}
event.stopPropagation();});
Figured it out. We were not loading a components.js file (as well as other scripts) in the angular.json file. Our previous version of angular did not contain an angular.json file.
I am building a site using Angular 6 and have been stuck for a few days now on a problem. I am trying to change text color (list items) on a navbar based on the active page. I have seen examples on how to do this using AngularJS and javascript. I have come across the routerActiveLink library documentation at https://angular.io/api/router/RouterLinkActive library for Angular 5+ which seems to be a simple solution, but it is not working for me. I have tried many different examples I have seen online and none have worked. Am I missing something? Here are some code snippets:
header.component.html
<div class="navbar-collapse collapse navbar-nav pull-right" id="navbar">
<ul class="navbar-nav" style="align-items: center;">
<li class="main-links" [routerLinkActive]="['active']">
<a class="al" [routerLink]="['home']" id="home-button" href="home">Home</a>
</li>
<li class="main-links">
<a class="al" routerLink="/about" routerLinkActive="active" id="about-button" href="about">About</a>
</li>
<li class="main-links">
<a class="al" id="blog-button" href="https://tspace.web.att.com/blogs/financelive/?lang=en_us" target="_blank">Blog</a>
</li>
<li class="main-links">
<a class="al" routerLink="/albums" routerLinkActive="active" id="albums-button" href="albums">Platinum Albums</a>
</li>
<li class="main-links">
<a class="al" routerLink="/programs" routerLinkActive="active" id="programs-button" href="programs">Development Programs</a>
</li>
<li class="main-links">
<a class="al" routerLink="/contact" routerLinkActive="active" id="contact-button" href="contact">Contact Us</a>
</li>
</ul>
This is my declaration for active in header.component.less:
.active {
color: #009fdb;
font-family: font-bold;
}
When I use [routerLinkActive] with the brackets, the page does not load at all, and when I user routerLink and routerLinkActive in the a tag, it does not register at all. Are there some imports I am missing. I have tried importing router, routerlinkactive, and routerlink from #angular/core.
I purposely left both different styles of using routerLinkActive in the code example. It was not like this when I actually ran it.
I have Angular 6, bootstrap 4.1.1, jquery 3, and popperjs installed.
After further review, I have discovered that routerLinkActive works correctly on elements inside the root app-module. I created a new module for my header and footer called UiModule and the functionality is not working inside the header. Any ideas on how to get routerLinkActive to work on this module?
Try importing RouterModule into your UiModule, it won't be able to make use of that imported in your app.module.ts file
import { RouterModule } from '#angular/router';
// some other imports here
#NgModule({
imports: [
RouterModule
],
exports: [
// export UI components
],
declarations: [
// declare UI components
]
})
When I had this issue, I imported everything right. It took me days before I figured the problem was from how I structured my HTML
<li class="nav-list">
<a routerLinkActive="active"
[routerLinkActiveOptions]="{exact: true}"
routerLink="/"
href="/">
<i class="material-icons nav-link-icon">person</i>
<span class="nav-link-text">Profile</span>
</a>
</li>
The problem there was that I was watching for the .active class to appear in the li element while it had always been appearing in the anchor element. Just be sure that is not what is happening in your case.
I am trying to put html in the bootstrap popover and the content shows nicely but when I click on my links inside the popover it just goes to the parent 'OpenRecent' method on the anchor tag that triggers the popover. You can see below in the data-content html the different ways I try to call the function I want. How can I achieve this?
<ul id="RecentSearches" class="nav nav-tabs nav-stacked well" data-bind="foreach: CurrentItems">
<li>
<div>
<input type="checkbox" class="checkbox inline" data-bind="value: $data.TransId,
checked: $root.ItemsSelected"/>
<a href="#"
data-bind="text: $data.Description + '-' + $data.County,
attr:
{
id: $data.TransId,
'data-title': $data.Description
},
click: $root.OpenRecent"
data-trigger="hover"
rel="popover"
data-html="true"
data-content="<a data-bind='click: $parent.Print.bind($data)'>Print</a> |
<a data-bind='click: app.RecentSearches.Print.bind($data)'>Print 2</a>
<a data-bind='click: $parent.Email'>Email</a> |
<a data-bind='click: $parent.SaveToPDF'>PDF</a> |
<a data-bind='click: $parent.SavetToCSV'>CSV</a>">
</a>
</div>
</li>
</ul>
The HTML is your data-content will not have been bound by Knockout, as it was added dynamically later.
One option is to add a way to identify the links (class) and then use an unobstrusive approach to adding an event handler.
$("ul").on("click", ".print", function(event) {
var context = ko.contextFor(this);
context.$root.Print(context.$data);
event.preventDefault();
});
I am not sure why your OpenRecent function is getting called. It appears to me that bootstrap creates the popover outside of the element that it is triggered on. So, this would not be a parent of the popover. If you are still having an issue with that part, then maybe you could get it working in jsFiddle.
Here is a fiddle with the unobtrusive handler: http://jsfiddle.net/rniemeyer/Edww3/