Question

这是我项目的回购：https://github.com/vipul-verma/naysa

问题：

在navigation.html中我添加了一个名为navCtrl的控制器，我还添加了activemenu函数来设置点击的li标签上的活动类，但是当我加载页面时，第一个活动类被应用于li＆＃39; about＆＃39;因为它设定在起点。

但是，当我点击另一个li标签时，它首先会将一个类添加到当前的li标签，然后刷新它并将其添加回＆＃39; about＆＃39; li tag。

请帮助在点击的元素上创建活动类。

Answer 1

<li ui-sref-active="active">
    <a href ui-sref="some.state"></a>
</li>

如果状态与当前网址匹配，它将查看网址并将active类添加到元素。

Answer 2

我建议添加一个mainCtrl附加到正文并听取stateChangeSuccess：

.controller('mainCtrl', ['$scope', '$rootScope', function($scope, $rootScope){
    $rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {
        console.log("$stateChangeSuccess: "+fromState.name+" > "+toState.name);
        $scope.activeMenu = toState.name;
    });
}])

从$scope.activeMenu = 'about';删除navCtrl。

P.S。：我注意到navigation.html中有拼写错误，在第33行你必须引用'contact'（而不是'contacts'）：

<li ng-class="{active : activeMenu === 'contact'}" ng-click="activeMenu = 'contact'"><a ui-sref="contact">Contact</a></li>

在ui-router中设置ng-click上的活动类

2 个答案: