从指令中按id向元素添加Class

Question

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

Plunker链接此处

代码：

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

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

希望这能帮助