AngularJS ng-click 在 <li> 标签中不起作用

Question

我正在使用AngularJS 制作分页列表图像。当我在<li> 标签甚至<a> 标签中使用它时，ng-click 不起作用。但它在<button> 标签中运行良好。

<div  ng-controller="sampleCtrl" ng-app="myApp" data-ng-init="currentpage=1">
            <h2>{{currentpage}}</h2>
        <ul>
             <li data-ng-repeat="image in images[currentpage-1]">
                <img src='{{ image.img }}' width="150px" height="88px"/>
             </li>
        </ul>


    <ul class="pagination">
        <li data-ng-repeat="i in [1,2,3,4,5]" title="Page {{i}}">
            <a href="#" data-ng-click="currentpage = currentpage + 1">{{i}}</a>
        </li>
    </ul>
    <button data-ng-click="currentpage = currentpage + 1">Click me!</button>

</div>

谁知道问题出在哪里？

顺便说一句，我试过this answer，但它不起作用。

Answer 1

这是因为ng-repeat 为每个重复的元素创建了一个新范围。而当您执行currentpage = currentpage + 1 时，您很可能是在子范围内创建了一个新变量。

检查您的范围。如果您不想重写整个内容，解决方案通常很简单，例如 $parent.currentpage = $parent.currentpage + 1（用于解决父作用域中的 currentpage 变量，sampleCtrl 作用域）。

另一种解决方案是创建一个函数来增加页码，这样您就不会创建任何新的子范围变量，而是会从控制器继承增加函数：

<a href="#" data-ng-click="increasePage()">{{i}}</a>

在你的控制器中是这样的：

$scope.increasePage = function() {
     currentpage++;
}