javascript – ng-click对锚元素不起作用

2023年3月11日 176次阅读

Q1：我尝试在bootstrap中使用nav来制作导航栏并将ng-click绑定到锚点.

但是,在我单击锚链接后,没有任何反应.

Q2：我注意到点击的锚链接不会通过设置bg-color来激活它？如何实施？

这是JSfiddle ……

<div ng-controller="SuiteSectionCtrl">
<ul class="nav nav-pills nav-stacked">
    <li class="active"><a href="#">All Suites</a>
    </li>
    <li><a ng-click="handleClick">Suite1</a>
    </li>
    <li><a href="#">Suite2</a>
    </li>
    <li><a href="#">Suite3</a>
    </li>
</ul>

最佳答案 回答Q2：

也许有更聪明的解决方案,但这个也可以：

angular.module('myApp').controller('MenuCtrl', ['$scope', '$location', '$rootScope',
    function ($scope, $location, $rootScope) {
        $rootScope.$on('$locationChangeSuccess', function () {
            var path = $location.path();
            // you may apply logic on the path (group together in case of dropdown-menu e.g.)
            $scope.topMenu = path;
        });
    }
]);

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation"
     ng-controller="MenuCtrl">
    <div class="container-fluid">
        <div class="navbar-header">
            <!-- ... -->
        </div>

        <div class="navbar-collapse collapse" id="navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li ng-class="{active: topMenu == '/'}">
                    <a href="#">Home</a></li>
                <li ng-class="{active: topMenu == '/about'}">
                    <a href="#about">About</a></li>
                <!-- more... -->
            </ul>
        </div>
    </div>
</div>
点赞