NG单击NG重复多次执行

本文介绍了NG单击NG重复多次执行的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我一直面临着一个意想不到的问题。这里是我的code

I've been facing an unexpected issue. Here is my code

<li ng-repeat="(key,product) in products"> <div class="avl-box"> <a href="javascript:void();" ng-click="showDetail(product.item_id);"> <img ng-src="{{SITEURL}}files/item/f_image/{{key}}/{{product.f_image}}" width="1000" height="1000" alt=""> </a> </div> </li>

在我的产品阵列，我有 3 产品。所有的东西都工作正常，甚至 NG：点击（）; 太。但我的问题是，为什么 NG：点击执行三次当我点击一次？我搜索了很多，但没有为我工作。同样的问题，我与 NG-选项和 NG-变化在一起倒是。见下面的例子 -

In my products array, I've 3 products. All things are working fine even ng:click(); too. But my issue is why ng:click executes three times when I click once ? I've searched it a lot but nothing works for me. The same issue I'd with ng-options and ng-change together. See below example -

<select class="form-control dropDownPercent" name="demo" ng-model="CampaignsService.percentModel[$index]" ng-change="CampaignsService.showChange(CampaignsService.percentModel[$index], $index)" ng-options="o as o for o in CampaignsService.percentDropDownOptions[$index].values">

选项进行了适当的到来，在此下拉我 10 条款显示，但是当我选择之一，那么 showChange 函数确实执行 10 倍。谁能帮我？

Options were coming properly, in this drop down I'd 10 items to display, but when I chose one then showChange function did execute 10 times. Can anyone help me?

推荐答案

我发现我的code的又走了多久失败背后的原因。究其原因是，我在我的前pression之一调用函数，那就是

I found a reason behind the failure of my code after a long walk. The reason was, I was calling a function in one of my expression and that was

<div class="slide3-price"> {{showDetail().item_price | currency}} </div>

和我的功能是

$scope.showDetail = function (prod_id) { if (typeof prod_id === 'undefined') { prod_id = 27; } //logical code return { 'colors': json.campaign_data.Product[prod_id].Color, 'prod_title': this.val, 'f_image': json.campaign_data.Product[prod_id].f_image, 'item_id': prod_id, 'item_price': json.campaign_data.Product[prod_id].price } }

所以，在结合前pression力量发挥作用，以重新评估在每次摘要的每一项功能。相反，调用一个前pression一个功能，我创建值的数组，并在模板中使用它们。像

So binding a function in expression forces that function to be reevaluated for the every item on every digest. Instead of calling a function in an expression, I created an array of values and use them in template. Like

<div class="slide3-price"> {{campaignDetailDescription['item_price'] | currency}} | currency}} </div>

但要prevent多次呼吁，我们需要添加监视监听器此变量的函数或添加计数器vairable 。我做了一个柜台，现在我的函数看起来像

But to prevent multiple times calling a function we need to add a watch listener to this variable or add a counter vairable. I made a counter and now my function looks like

$scope.showDetail = function (prod_id) { var counter = 0; if (counter === 0) { if (typeof prod_id === 'undefined') { $scope.setItemId(); } else { $scope.item_id2 = prod_id; } $scope.gettitle($scope.item_id2); $scope.campaignDetailDescription['colors'] = $scope.json.campaign_data.Product[$scope.item_id2].Color; $scope.campaignDetailDescription['prod_title'] = $scope.val; $scope.campaignDetailDescription['f_image'] = $scope.json.campaign_data.Product[$scope.item_id2].f_image; $scope.campaignDetailDescription['item_id'] = $scope.item_id2; $scope.campaignDetailDescription['item_price'] = $scope.json.campaign_data.Product[$scope.item_id2].price; } counter++; }

现在我的函数只执行一次， NG-点击。由于 SO 。

Now my function is executing only once for ng-click. Thanks to SO.