如果我单击该项目，“活动”不会移动到项目

Question

JS

mainApp.controller("leftmenuController", function($scope, $http) {
    $scope.check = function(event) {
        $('li').removeClass('active');
        $(event.target).addClass('active');
    };
});

HTML

<li class="active" ng-click="check($event)"><a href="#/firstpage">Link</a>
<li ng-click="check($event)"><a href="#/project"></a></li>

如果我点击该项目，“活动”不会移动到项目。 我的代码出了什么问题。

Answer 1

  

我的代码出了什么问题

它没有使用角度，因为它意味着要使用。您应该从不在控制器中执行DOM操作。控制器应该只更改模型，视图应该使用角度表达式和指令来基于此模型生成HTML。

所以你应该有像

这样的东西

<li ng-class="{active: activeLink === 'first'}" ng-click="checkLink('first')" ...>

和

<li ng-class="{active: activeLink === 'project'}" ng-click="checkLink('project')" ...>

控制器应该只做

$scope.checkLink = function(link) {
    $scope.activeLink = link;
}

Answer 2

试试这个

    $scope.activeMenu = 'firstpage';
    $scope.check = function(menu) {
        $scope.activeMenu = menu;
    };

HTML

<li ng-class="{'active':activeMenu=='firstpage'}" ng-click="check('firstpage')"><a href="#/firstpage">Link</a>
<li ng-class="{'active':activeMenu=='project'}" ng-click="check('project')"><a href="#/project"></a></li>

Answer 3

你可以在没有jquery的情况下完成

<li ng-class="setActive('#/firstpage')"><a href="#/firstpage">Link</a>

在模板中

$scope.setActive= function (path) {
  return ($location.path().substr(0, path.length) === path) ? 'active' : '';
}