Question

我需要一个帮助。我需要在导航菜单时在锚标记内设置上一个状态。我正在解释下面的代码。

<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>

在此代码中我需要当用户点击Resource Management菜单时此菜单将处于活动状态，其他菜单将不会激活（Here i am using active class for highlight the menu）并将显示刚才的状态页面。因为它有一些子菜单这些子菜单将显示在下拉列表中。在这种情况下，一切正常，但它抛出以下错误，cursor:pointer属性也没有出现在这个菜单上。

错误：

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在转换后不会跟踪之前的状态，但是当状态发生变化时，$ rootScope上会广播事件 $ stateChangeSuccess 。

您应该能够从该事件中捕获先前状态（“来自”是您要离开的状态）：

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)
        });
}]);

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

1 个答案: