我遇到过多种形式的此类问题,但没有一个对我的情况足够具体。我有一个基本的 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
,但它似乎并没有把类放到位。
如有必要,我可以提供额外的代码或输出。
最佳答案
你不应该使用 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'
};
关于javascript - 从 Controller AngularJS 中突出显示事件页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33576436/