Issue
I am new with AngularJS. Basically now I have two pages on my side bar.
<div class="menu-list">
<ul id="menu-content" class="menu-content collapse out">
<li><a ui-sref="dashboard"> <i class="glyphicon glyphicon-home"></i> Dashboard </a></li>
<li data-toggle="collapse" data-target="#new" class="collapsed">
<a ui-sref="status-count"><i class="glyphicon glyphicon-list-alt"></i> Record Count by Branch</a>
</li>
</ul>
</div>
Then I tried to link the page from dashboard
to the status-count
with
<tr ng-repeat="x in branches">
<td class="text-center">{{ x.BRANCHCODE +" - "+ x.BRANCHNAME}}</td>
<td><div class="center-block {{x.AMQ ? 'online-ico': 'offline-ico'}}"> </div></td>
<td><div class="center-block {{x.SQL ? 'online-ico': 'offline-ico'}}"> </div></td>
<td><a href="/#/status-count/{{selectedState}}/TSL/{{x.BRANCHCODE}}/"><div class="center-block {{x.SL ? 'online-ico': 'offline-ico'}}"> </div></a></td>
<td><a href="/#/status-count/{{selectedState}}/REF/{{x.BRANCHCODE}}"><div class="center-block {{x.REF ? 'online-ico': 'offline-ico'}}"></div></a></td>
</tr>
App.js
var app = angular.module('jimApp', ['ui.router','ngRoute', 'ngCookies' ]);
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/dashboard');
$stateProvider.state('dashboard', {
url : '/dashboard',
templateUrl : 'views/dashboard.html',
controller : 'DashboardController'
}).state('status-count', {
url : '/status-count/:param1/:param2/:param3',
templateUrl : 'views/status-count.html',
controller : 'RecordCountController'
});
});
The linking works fine. However one new issue now is the side bar URL is now set to the last URL I clicked, for example
<a ui-sref="status-count" href="#/status-count/02/REF/1002161"><i class="glyphicon glyphicon-list-alt"></i> Record Count by Branch</a>
The desire outcome is the side bar href should be only #/status-count
without the parameters.
Solution
You may skip adding the params to the URL (which will make it visible in the URL), and use params
key to define them:
.state('status-count', {
url : '/status-count',
templateUrl : 'views/status-count.html',
controller : 'RecordCountController',
params: {
param1: null,
param2: null,
param3: null
}
})
There is only one caveat. You must use ui-sref
instead of href
in the a
tags. But that can be done easily like this:
<a ui-sref="status-count({param1: selectedState, param2: 'TSL', param3: x.BRANCHCODE})"> ... </a>
This way, the params passed won’t be visible in the URL but can be fetched using $stateParams
or $transition$.params()
.
Answered By – 31piy
Answer Checked By – David Goodson (AngularFixing Volunteer)