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。因此，当用户点击您的链接时，它会突出显示，但不会重定向到该页面。

您可以在控制器中编写一个功能来重定向页面。让我们说你创建了＆＃34; redirectPage＆＃34;在控制器中运行，然后你的链接就像：

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

这是ng-dblclick的功能。 JSFiddle

希望它有效：）

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

1 个答案: