Question

我遇到过这些问题的多种形式，但没有一种对我的情况有足够的影响。我有一个基本的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，但似乎没有把课程安排到位。

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

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'
};

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

1 个答案: