我正在向其中一个视图添加分页，并且希望当前页面获得bootstrap的页面class="active"。由于只有一个HTML文件，并且当前页面是通过传递的$routeParams，因此总页面数可能会更改，因此我需要使用创建分页ng-repeat并在其后添加活动类。我创建了一条指令，应该<li>在创建正确的标记后执行此操作，但不会执行该操作。我不知道表达式的时间顺序是否仍然存在问题，或者我是否需要以与指令内不同的方式处理DOM元素。
代码：
<ul class="pagination pagination-sm">
<li ng-repeat="p in pages()" id="{{p}}" mark-active-page page="{{currentpage}}" repeat="{{p}}"><a href="">{{p}}</a></li>
</ul>
控制器功能和变量：
$scope.currentpage = 1;
$scope.pagecount = 4; //total pages
$scope.pages = function() {
var input = [];
for (var i = 1; i <= $scope.pagecount; i++) {
input.push(i);
}
return input;
};
指令（以后可能会变得更干净。atm我的重点是jQuery）：
app.directive('markActivePage', function($parse) {
return {
restrict: 'A',
scope: {
page: '@',
repeat: '@',
},
link: function(scope, elem, attrs) {
attrs.$observe('repeat', function(r){
attrs.$observe('page', function(p){
if(r==p) {
var id = '#' + p;
//I get the right id here without a problem, but the jQuery doesn't work
angular.element(id).addClass('active');
}
});
});
}
};
});
您可以使用内置的角度指令（例如ng-class和ng-click）来简化此操作。见下文：
<li ng-click="setCurrentPage(p)" ng-class="{active: currentpage === {{p}}}" ng-repeat="p in pages()" id="{{p}}"><a href="">{{p}}</a></li>
然后，您可以删除markActivePage并将其放在您的控制器中。
$scope.setCurrentPage = function(p) {
$scope.currentpage = p;
}
希望这可以帮助
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句