如何使用 angular.js 在锚标记内设置先前的状态

Question

I need to set the just previous state inside the anchor tag while navigating the menu. Here is my code:

<div id="navbar" class="navbar-collapse collapse">
    <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="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Resource Management <span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a ui-sref="#">Add User Role</a></li>
                <li><a ui-sref="#">Add Course</a></li>
                <li><a ui-sref="#">Add Section</a></li>
                <li><a ui-sref="#">Add Session</a></li>
                <li><a ui-sref="#">Add Semester</a></li>
                <li><a ui-sref="#">Add Unit</a></li>
            </ul>
        </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>
</div>

In this code I need when user will click on "Resource Management" menu. This menu will active and other menus will not active (here I am using active class for highlight the menu) and will show the just previous state page.

As it has some sub menus these sub menus will display in dropdown list. In this case all is coming properly but it's throwing the below error and cursor:pointer property also not coming on this menu.

Error:

Error: Could not resolve '#' from state 'dashboard'
    at Object.t.transitionTo (angularuirouter.js:7)
    at Object.t.go (angularuirouter.js:7)
    at angularuirouter.js:7
    at angularjs.js:146
    at e (angularjs.js:43)
    at angularjs.js:45

Answer 1

ui-router doesn't track the previous state once it transitions, but the event $stateChangeSuccess is broadcast on the $rootScope when the state changes.

You should be able to catch the prior state from that event (" from " is the state you're leaving):

app.run(['$rootScope',function($rootScope)
{  
  $rootScope.previousState;
    $rootScope.currentState;
        $rootScope.$on('$stateChangeSuccess', function(ev, to, toParams, from, fromParams) {
            $rootScope.previousState = from.name;
            $rootScope.currentState = to.name;
            console.log('Previous state:'+$rootScope.previousState)
            console.log('Current state:'+$rootScope.currentState)
        });
}]);