Question

我正在为我的一个视图添加分页，我希望当前页面获得引导程序class="active"。由于只有一个HTML文件，并且当前页面通过$routeParams传递，并且总页数可能会发生变化，因此我需要创建ng-repeat的分页并在此之后添加活动类。我创建了一个指令，应该在创建正确的<li>标记后执行此操作，但它不会执行此操作。我不知道它是否仍然是解决表达式的时间顺序的问题，或者我是否需要以不同于指令的方式来解决DOM元素。

Plunker Link here

代码：

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

指令（稍后可能会变得更清晰。我的重点是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');
                    }
                });                  
            });          
        }
    };
});

Answer 1

使用内置的角度指令（如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;
}

希望这有帮助

在指令中通过id向元素添加Class

1 个答案: