Javascript 从控制器AngularJS中高亮显示活动页面

我遇到过许多形式的问题，但没有一个是针对我的具体情况的。我有一个基本的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()) ;

}]);

app.controller（'NavController'，['$scope'，'$sce'，'$route'，'$location'，函数（$scope，$sce，$route，$location）{
页数={
“家”：“#/”，
“简历/简历”：“简历”，
“出版物”：“#/publications”，
“联系人”：“#/contact”
};
$scope.getClass=函数（第页）{
//如果（$route.current.activetab==page）
//返回“活动”；
log（（'/'+page）==$location.path（））；
如果（（“/”+页面）==$location.path（））
//返回“活动”；
返回true；
其他的
返回false；
};
$scope.listPages=函数（）{
ret=''；
用于（输入页面）{
//ret+='
'；
ret+='
'；
//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>

---

此外，在Angular JS应用程序中包含导航菜单的最佳实践是什么？我应该只在包含的HTML文件中编写HTML，还是像我在上面的示例中所做的那样继续，使用

trustAsHtml

注入HTML。抱歉，我是Angular新手。这很好。完全忘记了

ng repeat

.让我尽快回答。酷，很高兴它有帮助！

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