AngularJS NG单击＆LT不工作;李＆GT;标签 [英] AngularJS ng-click not working in <li> tag

问题描述

我用 AngularJS 制作分页列表图像。 NG-点击不工作时，我用它在＆LT;李＆GT; 标签，甚至在＆LT; A＆gt;在它标记。但是，它的正常工作在＆LT;按钮方式＆gt; 标签

I'm making a pagination list image using AngularJS. ng-click doesn't work when I use it in <li> tag or even on <a> tag in it. But it's working fine in <button> tag.

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

任何人都知道出了什么问题？

Anyone knows what's the problem?

顺便说一句，我试过这个答案，但它不工作。

BTW, I tried this answer, but it's not working.

推荐答案

这是因为 NG-重复为每个重复元素的新范围。而当你在做当前页=当前页+ 1 ，你最有可能创造一个子域内的新变量。

It's because ng-repeat creates a new scope for each repeated element. And when you're doing currentpage = currentpage + 1, you're most probably creating a new variable inside a child scope.

检查范围。这些解决方案通常是简单的东西如 $ parent.currentpage = $ parent.currentpage + 1 （解决当前页在父作用域变量中， sampleCtrl 范围内），如果你不希望重写了整个事情。

Check your scopes. The solutions is usually something as simple as $parent.currentpage = $parent.currentpage + 1 (to address the currentpage variable in the parent scope, the sampleCtrl scope) if you don't want to rewrite the whole thing.

另一个解决方案是创建一个函数，增加了页码，这样你就不会创建任何新的子范围变量，但会继承来自控制器的增加功能：

Another solution would be creating a function to increase the page number, that way you won't be creating any new child scope variables, but would inherit the increase function from the controller:

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

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

And in your controller something like this:

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

这篇关于AngularJS NG单击＆LT不工作;李＆GT;标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！