I am getting some issue while using Angular.js Ui-router.First let me to explain my code below.
<ul class="nav navbar-nav">
<li ui-sref-active="active" ><a ui-sref=".profile">College Profile</a></li>
<li ui-sref-active="active" ><a ui-sref=".stream">College stream</a></li>
<li ui-sref-active="active"><a ui-sref=".dept" >College Department</a></li>
<li class="dropdown " ui-sref-active="active">
<a ui-sref=".res.userrole" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Resource Management <span class="caret"></span></a>
</li>
<li ui-sref-active="active"><a ui-sref=".usermanagement">User Management</a></li>
<li ui-sref-active="active"><a ui-sref=".role">User Role</a></li>
</ul>
When user is clicking on Resource Management menu the below page is opening.
<div class="container">
<tabset>
<tab ui-sref="dashboard.res.userrole" ui-sref-active="active">
<tab-heading>Add User Role</tab-heading>
</tab>
<tab ui-sref="dashboard.res.course" ui-sref-active="active">
<tab-heading>Add Course</tab-heading>
</tab>
</tabset>
<div ui-view></div>
</div>
Here i need if user will select Add course tab the main menu Resource Management will be hignlight/active.In this case only it is active when user is clicking Add User Role tab.Please check my below route file.
.state('dashboard.res', {
url: '/res',
templateUrl: 'dashboardview/res.html',
controller: 'resController'
})
.state('dashboard.res.userrole', {
url: '/userrole',
templateUrl: 'dashboardview/userrole.html',
controller: 'resourceuserroleController'
})
.state('dashboard.res.course', {
url: '/course',
templateUrl: 'dashboardview/course.html',
controller: 'resourcecourseController'
})
Here i have also another issue.Suppose user is refreshing the page staying on any tab select the ,the both tab are getting highlighted.Actually here i need if Add user roletab will select the parent menu will be highlight and same forAdd course`.I was following this plunkr link but in my case its not working as per required.Please help me to resolve this issue.
Related
I am using angular to pull content and display on some pages of the site. I have bootstrap drop-down menu in the header. Based on the user login in, some drop-down option are hidden. To achieve this, I used ng-if on the header controller. Everything working fine.
But the issue is, sometimes when I open the site I am able to see hidden drop-down options also and {{userRole}} is displayed as {{userRole}}. why is this happening? Thank you.
Screen shot of issue
In the screen shot, user can see two my profile icons.
var itpApp = angular.module("itpApp",['ngRoute','angular.filter','ui.bootstrap','ngSanitize']);
itpApp.controller("headerController", function($scope, $rootScope) {
var gaR = new GlideAjax('ITPortalUtil0');
gaR.addParam('sysparm_name','u_role');
gaR.getXML(function(response) {
$rootScope.userRole = response.responseXML.documentElement.getAttribute("answer");
$rootScope.$apply();
console.log('user role check: '+$rootScope.userRole);
//$rootScope.userRole = $localStorage.user_role;
});
});
<div class="navbar navbar-default1" ng-controller="headerController">
<div class="navbar-collapse collapse" id="shortMenu">
<ul class="nav navbar-nav">
<li class="dropdown">
My Tickets$[SP]<b class="caret"></b>
<ul class="dropdown-menu" id="menu7">
<li ng-if="userRole =='ess'"><a href="#" role="button" data-toggle="modal" data-target="#myModal" >My Profile</a></li>
<li ng-if="userRole =='itil'">My Profile</li>
</ul>
</li>
</ul>
</div>
I have the following angular code in header.html
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li ng-if='loginState.loggedIn' class="dropdown">
<a class="dropdown-toggle"
data-toggle="dropdown"
id="userDropdown"
role="button"
aria-haspopup="true" aria-expanded="false">
{{loginState.currentUser}} <span class="caret"></span>
</a>
<ul class="dropdown-menu" data-toggle="collapse" aria-labelledby="userDropdown">
<li><a ui-sref="app.profile">Your Profile</a></li>
<li><a ui-sref="app.settings">Settings</a></li>
</ul>
</li>
<!-- this would work
<li><a ui-sref="app.profile">Your Profile</a></li>
-->
</ul>
</div>
The states code are very straightforward:
app.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/',
views: {
'header': {
templateUrl: 'static/templates/header.html',
},
'content': {
templateUrl: 'static/templates/landing.html',
},
'footer': {
templateUrl: 'static/templates/footer.html',
}
}
})
.state('app.profile', {
url: 'profile',
views: {
'content#': {
templateUrl : 'static/templates/profile.html',
controller : 'ProfileController'
}
}
})
;
$urlRouterProvider.otherwise('/');
}])
So basically once logged in, I would have a dropdown from the top right corner, and I want to transit to other states when clicking entries in dropdown menu.
However, when clicking Your Profile nothing happens, the state has not gone to app.profile. If I move the ui-sref out of the dropdown and to the navbar directly(like the commented code), it works perfectly fine.
So is there something prevent ui-sref from working in a bootstrap dropdown?
I found the problem, it's the data-toggle attribute in the dropdown menu ul, once it's removed everything works fine.
I don't know why it would prevent ui-sref from working, thought it would just collapse the menu.
EDIT:
The problem is reproducible only if I load jquery after ui-router:
<script src="//npmcdn.com/angular-ui-router#latest/release/angular-ui-router.js"></script>
<script data-require="jquery#2.2.0" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
If I swap the order it works fine.
I'm in an app that uses angular-route and I'm trying to integrate ui-router into a particular module. In this module, I have not included angular-route.
The ui-sref urls will all generate fine, but when a user tries to navigate to the view, it kicks back to root.
Can angular-route and ui-router co-mingle?
angular.module('StyleGuide', ['ui.router'])
.config(['$stateProvider', '$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/StyleGuide/');
// Configure UI-Router
$stateProvider
.state('styleguide', {
url: '/StyleGuide/',
templateUrl: 'App/StyleGuide/styleguide.html'
})
.state('styleguide.sandbox', {
url: '/StyleGuide/Sandbox',
templateUrl: 'App/StyleGuide/sandbox/sandbox.html',
controller: 'SandboxController'
});
}
]);
HTML
<div class="sgHeader">
<div class="navbar navbar-default">
<nav class="container-fluid">
<ul class="nav navbar-nav">
<li class="dropdown open" uib-dropdown >
<a role="button" class="dropdown-toggle" uib-dropdown-toggle aria-haspopup="true" aria-expanded="true">
<i class="fa fa-bars"></i>
</a>
<ul class="dropdown-menu" uib-dropdown-menu aria-labelledby="simple-dropdown">
<li><a ui-sref="styleguide.sandbox"><i class="fa fa-hourglass-start"></i>Sandbox</a></li>
</ul>
</li>
</ul>
<div class="navbar-header">
<a class="navbar-brand" ui-sref="styleguide"><span class="heavy">Soar </span>Styleguide</a>
</div>
</nav>
</div>
</div>
<div class="sg__body" ui-view>
<div style="text-align: center;">
<h1>The Soar Style Guide, this is.</h1>
<h3>Use it to promote codebase and visual consistency, you will.</h3>
<img src="https://s-media-cache-ak0.pinimg.com/originals/49/7d/80/497d80f923e70aaa558d17c9cd1ee142.gif" />
</div>
</div>
In the child State - 'styleguide.sandbox' change the URL from '/StyleGuide/Sandbox' to '/Sandbox'. Since you have already mentioned sandbox to be a child of styleguide, the router will automatically treat the URL for sandbox as '/StyleGuide/Sandbox', you don't have to specifically mention it.
Issue was with a rogue otherwise statement in another module.
I m learning to angular js and read some documents but i have face one problum .
HI i m using a application with navigation as like this
<ul class="nav navbar-nav">
<li ui-sref-active="active"><a ui-sref="dashboard.view">Dashboard</a></li>
<li ui-sref-active="active"><a ui-sref="aboutus">About</a></li>
<li ui-sref-active="active"><a ui-sref="contactus">Contact</a></li>
</ul>
Now my brodcrome is
Home > About > Carrer
My url is myxyz.com/#/aboutus/carrer
than active class is not apply About but if i click to About page than active class is add.
Can u please tell me what I code write.
Thanks .
What I did on your case was I created a function inside a controller with couple of dependencies and then use ng-class,
storeApp.controller('MyCtrl', function($scope, $location, $http) {
$scope.isActive = function(route) {
return route === $location.path();
}
And then used it in my navigation.
<ul class="nav navbar-nav" ng-controller="MyCtrl">
<li class="hvr-underline-from-left">
<a ng-class="{activeClass:isActive('/store')}" href="#/store">SHOP</a>
</li>
<li class="hvr-underline-from-left">
<a ng-class="{activeClass:isActive('/category/0/0')}" href="#/category/0/0">COLLECTIONS</a>
</li>
</ul>
In this example, make sure you have declared activeClass or what ever class name you want in your CSS
My html page contain two sections. Left side I have navigation(code is below) and right side is to display contents for respective navigation menu.
On click of each navigation menu, particular section should be rendered on my content part.
I have done it using ng-show/ng-hide by setting flag in my js file. But since I am setting flags for each sections and show/hide , my js code file looks very odd. I know this is not the correct way to do it.
I am new to angularjs. Kindly help me to achieve this efficiently.
HTML code: (only navigation part)
<div class="col-md-2">
<ul class="nav nav-pills nav-stacked">
<li class="active">Home</li>
<div class="collapse" id="Login">
<ul class="nav nav-pills nav-stacked">
<li><a class="glyphicon glyphicon-log-in" href="#" ng-click="LoginScreen()">Login</a></li>
<li><a class="glyphicon glyphicon-user" href="#" ng-click="RegisterScreen()">Register</a></li>
</ul>
</div>
<li>About</li>
<div class="collapse" id="Contact">
<ul class="nav nav-pills nav-stacked">
<li><a class="glyphicon glyphicon-save" href="#" ng-click="LoadUserDetailsScreen()">LoadUserDetails</a></li>
<li><a class="glyphicon glyphicon-phone-alt" href="#">Contact</a></li>
</ul>
</div>
</ul>
</div>
JS code:
var app = angular.module('myApp', []);
app.controller('mycontroller', function($scope) {
$scope.FlagHomeScreen = true;
$scope.LoadData=false;
$scope.showtable=false;
$scope.showstatus=false;
$scope.FlagLoginScreen = false;
$scope.RegisterScreenFlag= false;
$scope.menuitems =[10,20,30];
$scope.LoginScreen = function(){
$scope.FlagLoginScreen = true;
$scope.FlagHomeScreen =false;
$scope.LoadData=false;
$scope.RegisterScreenFlag=false;
};
$scope.LoadUserDetailsScreen =function(){
$scope.LoadData=true;
$scope.FlagLoginScreen = false;
$scope.FlagHomeScreen =false;
$scope.RegisterScreenFlag=false;
};
$scope.RegisterScreen=function(){
$scope.RegisterScreenFlag=true;
$scope.LoadData=false;
$scope.FlagLoginScreen = false;
$scope.FlagHomeScreen =false;
};
});
You can handle your navigation in your app using ui-router. For your case you need a main template which includes your navigation bar and in each state of your app you want to show a different view.
Here is a fiddle which shows you how you can use ui-router to handle your views. For clarity I only implemented login and user details in the example below. You can add remaining parts yourself, it would be a good practice for you.
Define your states as such:
var myApp = angular.module('myApp', ['ui.router'])
.config(['$stateProvider', function ($stateProvider) {
$stateProvider.state('home', {
url: "/",
template: '<div ui-view=""/>' // templates of child states will fill components with ui-view attribute
})
.state('home.userDetails', {
url: "userDetails",
template: '<div>user details</div>',
controller: "UserDetailsCtrl"
})
.state('home.login', {
url: "login",
//templateUrl: "path/to/login.html" // instead of giving inline templates as below, you can include your template into a html file, and use it in your state by templateUrl property
template: '<div>user login</div>',
controller: "LoginCtrl"
})
}])
And you can navigate within your states using ui-sref instead of using ng-show and ng-click.
<div class="col-md-2">
<ul class="nav nav-pills nav-stacked">
<li class="active">Home</li>
<div class="collapse" id="Login">
<ul class="nav nav-pills nav-stacked">
<li><a class="glyphicon glyphicon-log-in" ui-sref="home.login">Login</a></li>
<li><a class="glyphicon glyphicon-user" href="#" ng-click="RegisterScreen()">Register</a></li>
</ul>
</div>
<li>About</li>
<div class="collapse" id="Contact">
<ul class="nav nav-pills nav-stacked">
<li><a class="glyphicon glyphicon-save" ui-sref="home.userDetails">LoadUserDetails</a></li>
<li><a class="glyphicon glyphicon-phone-alt" href="#">Contact</a></li>
</ul>
</div>
</ul>
</div>
<div ui-view=""/>
Don't forget to check documentation of ui-router:
http://angular-ui.github.io/ui-router/site/#/api
JSFiddle:
http://jsfiddle.net/7tzXh/48/