突出显示控制器AngularJS中的活动页面

Highlighting active page from within controller AngularJS

本文关键字：活动页 AngularJS 显示 控制器      更新时间：2023-09-26

我遇到过许多形式的这些问题，但没有一个对我的情况足够具体。我有一个基本的AngularJS应用程序，其中部分相关的html是：

<nav class="navbar" ng-controller="NavController as nav">
    <ul class="nav" ng-bind-html="pages"></ul>
</nav>

控制器定义为：

app.controller('NavController', ['$scope', '$sce', '$route', '$location', function($scope, $sce, $route, $location) {

    pages = {
        'home' : '#/',
        'resume/cv' : '#/resume',
        'publications' : '#/publications',
        'contact' : '#/contact'
    };

    $scope.getClass = function(page) {
        // if ($route.current.activetab == page)
        //  return 'active' ;
        console.log(('/' + page) === $location.path());
        if (('/' + page) === $location.path())
            // return 'active';
            return true;
        else
            return false;
    };
    $scope.listPages = function() {
        ret = '' ;
        for (key in pages) {
            // ret += '<li><a href="' + pages[key] + '" ng-class="' + $scope.getClass(key) + '">' + key + '</a></li>' ;
            ret += '<li><a href="' + pages[key] + '" ng-class="{active:' + $scope.getClass(key) + '}">' + key + '</a></li>' ;
            // ret += '<li><a href="' + pages[key] + '" ng-class="{active: $route.current.activetab == ' + key + '">' + key + '</a></li>' ;
        }
        return ret
    };
    $scope.pages = $sce.trustAsHtml($scope.listPages()) ;
}]);

根据评论，您可以看到我已经尝试了ret变量的几种风格。我可以使用class=" + $scope.getClass(page)获得一个活动类，但当我单击其他链接时，它不会更新。我求助于ng-class，但它似乎并没有把课程安排好。

如果需要，我可以提供额外的代码或输出。

您不应该使用ngBindHtml，而应该使用ngRepeat来渲染列表：

<nav class="navbar" ng-controller="NavController as nav">
    <ul class="nav">
        <li ng-repeat="(key, value) in pages">
            <a ng-href="{{value}}" ng-class="{active: getClass(key)}">{{key}}</a>
        </li>
    </ul>
</nav>

其中pages是作用域属性：

$scope.pages = {
    'home' : '#/',
    'resume/cv' : '#/resume',
    'publications' : '#/publications',
    'contact' : '#/contact'
};
相关文章：