分页转发器有一个活动类，当点击分页按钮时我必须移动它

Question

采取以下分页html和转发器：

<ul id="ProductListPagination" class="pagination">
    <li class="disabled"><a href="#"><span aria-hidden="true">&laquo;</span><span class="sr-only">Previous</span></a></li>

    <li ng-repeat="n in PageCount" ng-class="{active: n==1}"><a ng-click="Paginate( n )"  href="#"><% n %> <span class="sr-only">(current)</span></a></li>
</ul>

当按下其中一个分页按钮时，如何在转发器上移动active类...是否有内置的角度方式？...

上下文

---

如果角度没有内置方式，我如何将dom元素传递给Paginate( n )函数？

我有接收功能：

$scope.Paginate = function( obj, page ){

    // Remove currently active button's active class
    $( "#ProductListPagination li.active" ).each( function() {
        $( this ).removeClass( "active" );
    } ); 
    // Add to element just clicked on
    $( obj ).parent().addClass( "active" );
    ...

}

与之相关的HTML，你会看到我尝试传入this。

<li style="cursor:pointer" ng-repeat="n in PageCount" ng-class="{active: n==1}"><a ng-click="Paginate( this, n )"  href="#"><% n %> <span class="sr-only">(current)</span></a></li>

但是，这不起作用，不是dom元素。

Answer 1

<强>指令

这可以通过Directives完成，这些允许您定义自定义标记，即。一个元素，一个属性名称，它甚至可以挂钩到类名。然后你可以附上各种各样的东西。

https://egghead.io/lessons/angularjs-first-directive

所以你可以制定一个“分页”指令。

然后会使用类似的东西：

<my-pagination pages="arrayInScope">

然后，你可以提供一个外部模板甚至是一串标记（eww），用于需要在这个元素中或者替换这个元素。

另一种解决方案

但这是一种快速的方式，我想它无论如何都不需要复杂化。

Example on CodePen

从标记我调用分页功能解析ng-repeat提供的$index。在js i的paginate函数中然后设置它。

作为角度摘要：ng-class="{ active : page == current }"然后将重新评估。

但是如果由于某种原因需要访问该元素，那么使用指令。使用Angular时最好避免使用jQuery，如果它只是一个类更改或可见性切换等，那么最好让Angular为你做这个'

希望有所帮助。