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.
Related
I'm using the following ui-router configuration. So, when the user clicks on a tab, the tab is highlighted correctly as expected. However, no tab is highlighted when the page first loads and the user has to click on a tab for its state to get activated. I would like the home state to be the active tab when the page first loads. How can I achieve this?
angular.module("app", ['app.home', 'app.page1', 'app.page2', 'app.page3'])
.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('home');
$stateProvider
.state('home', {
url: '/',
views: {
'MainContentPlaceHolder': {
templateUrl: '../Home/_Layout.html'
}
}
})
.state('page1', {
url: '/page1',
views: {
'MainContentPlaceHolder': {
templateUrl: '../Page-1/_Layout.html'
}
}
})
.state('page2', {
url: '/page2',
views: {
'MainContentPlaceHolder': {
templateUrl: '../Page-2/_Layout.html'
}
}
})
.state('page3', {
url: '/page3',
views: {
'MainContentPlaceHolder': {
templateUrl: '../Page-3/_Layout.html'
}
}
});
})
My HTML markup is:
<body>
<section id="NavBar">
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" ui-sref="home"><span class="glyphicon glyphicon-home" aria-hidden="true"></span></a>
</div>
<ul class="nav navbar-nav">
<li ui-sref-active="active"><a ui-sref="home">Home</a></li>
<li ui-sref-active="active"><a ui-sref="page1">Page 1</a></li>
<li ui-sref-active="active"><a ui-sref="page2">Page 2</a></li>
<li ui-sref-active="active"><a ui-sref="page3">Page 3</a></li>
</ul>
</div>
</nav>
</section>
<section id="ContentPlaceHolder" ui-view="MainContentPlaceHolder"></section>
</body>
Okay so I managed to figure out the issue. It was a syntax error at the third line which should change from
$urlRouterProvider.otherwise('home');
to
$urlRouterProvider.otherwise('/');
I had thought that $urlRouter.otherwise() takes in the state as parameter. It should in fact be the redirect url.
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 am building an app using the MEAN stack, and in my index.ejs files I have
<div ui-view style="height: 100%"></div>.
My angularApp.js file has the following states declared:
var app = angular.module('foundry-io', ['ui.router']);
app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/',
templateUrl: 'javascripts/views/main.html',
controller: 'MainController'
})
.state('print', {
url: '/print',
templateURL: 'javascripts/views/print.html',
controller: 'MainController'
});
$urlRouterProvider.otherwise('/');
}]);
I also have a navbar as follows:
<div class="collapse navbar-collapse navbar-right navbar-main-collapse">
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
</li>
<li>
<a class="page-scroll" ui-sref="print">Services</a>
</li>
<li>
<a class="page-scroll" href="#technology">Technology</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
The home state renders as expected, but when clicking the "Services" nav button the view that's rendered is a blank, black screen. How do I make additional views render beyond the "home" view?
Thank you.
I have one problem.I have a login page.When user will logged in the home page is coming.In that home page i have some options which called its respective partial view page.Let me to explain my code first.
user.html:
<nav class="navbar navbar-default navbar-fixed-top"
style="margin-top:50px;z-index:111!important;">
<div class="container" style="width:1270px;">
div class="navbar-header navbar-brand">
{{deptName}}
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li ui-sref-active="active"><a ui-sref="user">Home</a></li>
<li ui-sref-active="active"><a ui-sref=".plan">Plan</a></li>
<li ui-sref-active="active"><a ui-sref="#">Subject</a></li>
<!-- <li ui-sref-active="active"><a ui-sref=".hod">HOD</a></li> -->
<li ui-sref-active="active"><a ui-sref="#">User Management</a></li>
<li ui-sref-active="active"><a ui-sref="#">User Role</a></li>
<li ui-sref-active="active"><a ui-sref="#">Time Table</a></li>
<li ui-sref-active="active"><a ui-sref="#">Faculty</a></li>
<li ui-sref-active="active"><a ui-sref="#">WDS</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<!--main_heading_div-->
<!--middle_content_details_data-->
<div class="row" style="padding-top:120px;" ui-view>
</div>
After login the above page is coming. Check my below routing path:
.state('user',{
url: '/user',
templateUrl: 'userview/user.html',
controller: 'userController'
})
.state('user.plan',{
url: '/plan',
templateUrl: 'userview/plan.html',
controller: 'planController'
})
.state('user.profile',{
url: '/profile',
templateUrl: 'userview/profile.html',
controller: 'userProfileController'
})
Here I need when user will logged in the plan.html will set up by default inside the ui-view of user.html.
Well, it seems like a "default redirection issue". And there are solutions, this one I do like the most:
Redirect a state to default substate with UI-Router in AngularJS
where we can mark any state with its default redirection target:
.state('user',{
url: '/user',
templateUrl: 'userview/user.html',
controller: 'userController',
// here is new marker
redirectTo: 'user.plan'
})
And with this small code snippet it will start to do the magic:
app.run(['$rootScope', '$state', function($rootScope, $state) {
$rootScope.$on('$stateChangeStart', function(evt, to, params) {
if (to.redirectTo) {
evt.preventDefault();
$state.go(to.redirectTo, params)
}
});
}]);
There is even working example
I'm dealing with a redirection with ui-router.
I have a menu with items. When I chose one of them it redirects to the correspondant html template to load. Each html template contains tabs.
I would like to open a default tab for each item in the menu.
Here are my states:
$stateProvider
.state('app.my', {
url:'/my/:numeral',
templateUrl:
function (stateParams) {
return stateParams.numeral + '.html';
}
})
.state('app.my.first', {
url:'/:filter',
templateUrl:'list-results.html',
controller: 'FilterCtrl',
controllerAs: 'results'
})
.state('app.my.second', {
url:'/:filter',
templateUrl:'list-results.html',
controller: 'FilterCtrl',
controllerAs: 'results'
});
Here I created a Plunkr which works fine when I click on tabs manually.
My goal is to set a default open tab for each menu item.
http://plnkr.co/edit/oIQDIhx2vrp1o01Xz3EL?p=preview
Thanks in advance!
edit ui-sref values like that:
<ul class="nav nav-pills">
<li>
<a class="nav-tab" ui-sref-active="active" ui-sref="app.my.first({numeral:'first',filter:'draft'})">First</a>
</li>
<li>
<a class="nav-tab" ui-sref-active="active" ui-sref="app.my.second({numeral:'second',filter:'draft'})">Second</a>
</li>
</ul>