javascript - 如何在 AngularJs 中突出显示导航中选定的链接而不重定向页面

Question

我有链接列表。我想在单击该链接时突出​​显示所选链接，但不重定向到该页面。以下是相关代码。

HTML

  <ul class="nav nav-list"> 
    <li ng-repeat="navLink in navLinks" ng-class="navClass('{{navLink.Title}}')">
       <a href='#/{{navLink.Title}}'>{{navLink.LinkText}}</a> 
    </li>
  </ul>

Javascript:

 app.controller('CreatorController', function($scope,$rootScope,$location,$http,CreatorService,FlashService) {
$scope.navLinks = [{
        Title: 'home',
        LinkText: 'Home',
    }, {
        Title: 'about',
        LinkText: 'About Us'
    }, {
        Title: 'contact',
        LinkText: 'Contact Us'
    }];

    $scope.navClass = function (page) {
        var currentRoute = $location.path().substring(1) || 'home';
        return page === currentRoute ? 'active' : '';
    };
});

上面的代码运行良好，每当我单击其中一个链接时，它都会突出显示该链接，但会重定向到该特定页面。
我想将其显示为选定状态，但不想在单击链接时重定向到页面。我的代码会有哪些变化？

Answer 1

根据您的要求，您可以使用ng-dblclick，它仅在双击时执行。因此，当用户单击您的链接时，它将突出显示，但不会重定向到该页面。

您可以在 Controller 中编写一个函数来重定向页面。假设您在 Controller 中创建了“redirectPage”函数，那么您的链接将如下所示:

<a ng-dblclick="redirectPage()">link</a>

这是 ng-dblclick 的功能。 JSFiddle

希望它有效:)