AngularJs - ng-class 不工作答案

【问题标题】：AngularJs - ng-class not workingAngularJs - ng-class 不工作
【发布时间】：2018-06-21 18:41:46
【问题描述】：

我是 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();
    };
}]);

【问题讨论】：

我解决了这个问题，我为我的“header.html”和其他html页面使用了两个不同的角度模块。当我使用相同的模块时，它起作用了。再次感谢所有回答我的人。

标签： angularjs ng-class angularjs-ng-include

【解决方案1】：

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

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

第一个 evlas 表达式并设置类 active 如果为真。

第二个简单地获取表达式的返回值并将其设置为一个类，因此如果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>

【讨论】：

感谢您的回答。但它没有用。我尝试了两种方式，作为一个属性和一个类..都没有奏效。我将这个 header.html 包含在我的 index.html 中。只是想知道这是否会导致问题。

【解决方案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 必须是属性，不能嵌入到类属性中。

<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>

【讨论】：

感谢您的回答。我尝试了“属性方式”。没用。