分页中继器有一个活跃的类时，分页按钮点击

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

指令

这可以通过指令来完成，这些让你自定义的标记，即定义。一个元素，一个属性名称，它甚至可以挂钩到类名上。然后从那里你可以附加各种东西。

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

所以，你可以做一个 “分页” 指令。

，并且将被用于类似：

<my-pagination pages="arrayInScope">

然后你可以提供什么需要是无论是在此元素或更换外部模板或标记（EWW）的连串这个元素。

另一种解决方案

但是，这是一个快速的方法，我想它并不真的需要更多的超过无论如何复杂。

Example on CodePen

从我打电话的PAGINATE函数解析NG-repeat的提供$index的标记。在js中的paginate函数中，然后设置它。

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

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

希望有所帮助。