Question

我是Angular的新手，还在学习。我已经创建了'header.html'文件，并使用'ng-include'将其包含在其他html文件中。在“ header.html”中，我有一个导航栏，并且我希望导航栏链接在活动页面中处于活动状态。我努力了，但仍然做不完。非常感谢有人能帮助我解决这个问题。谢谢。

header.html

<body ng-app="headerModule">
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavAltMarkup" ng-controller="headerContr">
            <div class="navbar-nav">
                <a class="nav-item nav-link ng-class:{ active: isActive('/index.html')};"  href="./index.html"><span class="fa fa-home fa-lg"></span> Home</span></a>
                <a class="nav-item nav-link ng-class:{ active: isActive('/aboutus.html')};"  href="./aboutus.html"><span class="fa fa-info fa-lg"></span> About Us</a>
                <a class="nav-item nav-link ng-class:{active: isActive('/contactus.html')};" href="./contactus.html"><span class="fa fa-address-book fa-lg"></span> Contact us</a>
            </div>
        </div>
    </nav>
    <header class="jumbotron jumbotron-fluid">
        <div class="container fluid">
           <div class="row">

            </div>
        </div>
    </header>

app.js

var angApp = angular.module('angApp', []);
var headerModule = angular.module('headerModule', []);

headerModule.controller('headerContr', ['$scope', '$location', function($scope, $location){
    $scope.isActive = function (viewLocation) { 
        return viewLocation === $location.path();
    };
}]);

Answer 1

在HTML中使用ng-class有两种方法：

作为属性-<p ng-class='{"active" : isActive(params)}'></p>
作为CSS类-<p class='ng-class: isActive(params)'></p>

第一个表示表达式，并将类active设置为true。

第二个简单地使用表达式的返回值并将其设置为一个类，因此如果isActive()返回active，则将使用该类。

NgClass Documentation

这是NgClass的有效方法。可能是因为您已将{}添加到ng-class:定义中，并传递了多个表达式。

尝试像这样从每个实例中删除{}，并更新isActive方法，如果为true，则返回active（活动类），如果为false，则返回“（空白）”：

<div class="navbar-nav">
  <a class="nav-item nav-link ng-class: isActive('/index.html')"  href="./index.html"><span class="fa fa-home fa-lg"></span> Home</span></a>
  <a class="nav-item nav-link ng-class: isActive('/aboutus.html')"  href="./aboutus.html"><span class="fa fa-info fa-lg"></span> About Us</a>
  <a class="nav-item nav-link ng-class: isActive('/contactus.html')" href="./contactus.html"><span class="fa fa-address-book fa-lg"></span> Contact us</a>
</div>

$scope.isActive = function (viewLocation) { 
   if(viewLocation === $location.path()) return 'active';
   else return '';
};

其他选项：

我建议使用NgClass的attribute Usage。尝试将其从class属性中拉出来，并将其用作自己的属性。

<body ng-app="headerModule">
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
               <a class="navbar-brand" href="#">Navbar</a>
               <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                      <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarNavAltMarkup" ng-controller="headerContr">
                      <div class="navbar-nav">
                        <a class="nav-item nav-link" ng-class="{ active: isActive('/index.html')}"  href="./index.html"><span class="fa fa-home fa-lg"></span> Home</span></a>
                        <a class="nav-item nav-link" ng-class="{ active: isActive('/aboutus.html')}"  href="./aboutus.html"><span class="fa fa-info fa-lg"></span> About Us</a>
                        <a class="nav-item nav-link" ng-class="{active: isActive('/contactus.html')}" href="./contactus.html"><span class="fa fa-address-book fa-lg"></span> Contact us</a>
                    </div>
                    </div>
            </nav>
            <header class="jumbotron jumbotron-fluid">
                <div class="container fluid">
                    <div class="row">

                    </div>
                </div>
            </header>

Answer 2

我认为您在语法方面有疑问

<a class="nav-item nav-link ng-class:{ active: isActive('/index.html')};"  href="./index.html"><span class="fa fa-home fa-lg"></span> Home</span></a>

ng-class必须是属性，而不是嵌入在class属性中。

<a class="nav-item nav-link" ng-class="{ active: isActive('/index.html')};" href="./index.html"><span class="fa fa-home fa-lg"></span> Home</span></a>

AngularJs-ng-class不起作用

2 个答案: