AngularJS ng-click 函数将类添加到单击的导航链接

Question

我正在努力为 angularJS 应用程序的导航侧边栏找到正确的代码。应该发生的是，当您单击链接时，背景颜色应突出显示活动链接。它确实按预期工作，除了您必须在突出显示之前单击每个链接两次。 我做错了什么？任何帮助将不胜感激。

javascript

 $scope.addActiveClass = function ($index) {
        $scope.addActiveClass = $index;
        var checked = $('ul.sidebar2-nav li');

        $(checked).on("click", "", function () {
            $(this).addClass('active-label');

        });
     }

html

<nav id="program-editor-pullout" menustate="closed" >
        <ul class="list-unstyled sidebar2-nav">
            <li ui-sref-active="active-label">
                <div class="checkbox">
                    <label>
                        <input type="checkbox" ng-checked="true">
                        <a ng-click="addActiveClass($index)" ng-class="{active: home}" ui-sref-active="active" ui-sref=".home">Home</a>
                    </label>
                </div>
            </li>
            <li ui-sref-active="active-label">
                <div class="checkbox">
                    <label>
                        <input type="checkbox" ng-checked="true">
                        <a ng-click="addActiveClass($index)" ng-class="{active: evaluations}" ui-sref-active="active"  ui-sref=".evaluation">Evaluations</a>
                    </label>
                </div>
            </li>
            <li ui-sref-active="active-label">
                <div class="checkbox">
                    <label>
                        <input type="checkbox" ng-checked="true">
                        <a ng-click="addActiveClass($index)" ng-class="{active: questions}" ui-sref-active="active" ui-sref=".question">Questions</a>
                    </label>
                </div>
            </li>
            <li ui-sref-active="active-label">
                <div class="checkbox">
                    <label>
                        <input type="checkbox" ng-checked="true">
                        <a ng-click="addActiveClass()" ng-class="{active: hstranscripts}" ui-sref-active="active" ui-sref=".hstranscripts">High School Transcripts</a>
                    </label>
                </div>
            </li>
            <li ui-sref-active="active-label">
                <div class="checkbox">
                    <label>
                        <input type="checkbox" ng-checked="true">
                        <a ng-click="addActiveClass($index)" ng-class="{active: collegetranscripts}" ui-sref-active="active" ui-sref=".collegetranscripts">College Transcripts &amp; Course Work</a>
                    </label>
                </div>
            </li>
            <li ui-sref-active="active-label">
                <div class="checkbox">
                    <label>
                        <input type="checkbox" ng-checked="true">
                        <a ng-click="addActiveClass($index)" ng-class="{active: prerequisites}" ui-sref-active="active"  ui-sref=".prerequisites">Prerequisites</a>
                    </label>
                </div>
            </li>
            <li ui-sref-active="active-label">
                <div class="checkbox">
                    <label>
                        <input type="checkbox" ng-checked="true">
                        <a ng-click="addActiveClass($index)" ng-class="{active: documents}" ui-sref-active="active" ui-sref=".document">Documents</a>
                    </label>
                </div>
            </li>
        </ul>
    </nav>

CSS

  ul.sidebar2-nav li a.active {
   color: #000;
   cursor: pointer;
   text-decoration: none;
   }
  ul.sidebar2-nav li.active-label {
   background: whitesmoke;
  }

Answer 1

我找到了解决方案。你的例子是正确的，但在我的 html 代码中我有这个：

<li ui-sref-active="active-label" ng-click="addActiveClass($event, $index)">
        <div class="checkbox">
            <label>
                <input type="checkbox" ng-checked="true">
                <a ng-class="{active: home}" ui-sref-active="active" ui-sref=".home">Home</a>
            </label>
        </div>
    </li>

请注意锚标记上是如何具有 ng-class 和 ui-sref-active 的。我删除了这些属性，它按预期工作。感谢您的指导，不胜感激！！

Answer 2

将点击事件从 a 移动到父 li 标签

<nav id="program-editor-pullout" menustate="closed" >
            <ul class="list-unstyled sidebar2-nav">
                <li ui-sref-active="active-label" ng-click="addActiveClass($event, $index)">
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" ng-checked="true">
                            <a ng-class="{active: home}" ui-sref-active="active" ui-sref=".home">Home</a>
                        </label>
                    </div>
                </li>

将您的点击处理程序更改为类似的内容

$scope.addActiveClass = function ($event, $index) {
        $scope.addActiveClass = $index;
        //var checked = $('ul.sidebar2-nav li');

        //$(checked).on("click", "", function () {
        //    $(this).addClass('active-label');

        //});

        $($event.target).addClass('active-label');
     }