javascript - 从 Controller AngularJS 中突出显示事件页面

Question

我遇到过多种形式的此类问题，但没有一个对我的情况足够具体。我有一个基本的 AngularJS 应用程序，其中相关 html 的部分内容是:

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

Controller 定义为:

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，但它似乎并没有把类放到位。

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

Answer 1

你不应该使用 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'
};