Question

我正在使用AngularJS制作分页列表图像。当我在ng-click标记中使用<li>或其中的<a>标记时，<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>代码中工作正常。

{{1}}

任何人都知道问题是什么？

顺便说一句，我试过了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++;
}

AngularJS ng-click无法在<li>标签</li>中使用

1 个答案: