一键调用函数两次答案

【问题标题】：Function gets called twice with one click一键调用函数两次
【发布时间】：2017-04-22 11:07:33
【问题描述】：

我想将一个布尔值保存到我的范围内，但它应该以“活动”或“非活动”的形式显示。因此，我没有将其直接保存到 $scope，而是创建了一个函数，该函数根据所选项目保存布尔值。

HTML

<ui-select ng-model="statusTemp" id="sStatusAnz" name="sStatusAnz"> 
  <ui-select-match placeholder="{{'selectStatus' | translate}}" id="customerNewDropdownStatus">
    {{$select.selected | translate}} 
  </ui-select-match> 
  <ui-select-choices repeat="s in status" ng-click="setStatus($select.selected)">
    {{s}} 
  </ui-select-choices> 
</ui-select>

 $scope.editCustomer = { };   
 $scope.status = ['active', 'inactive'];
 $scope.setStatus = function(selected){
    console.log("setStatus(",selected,")");
    if( selected == "active" ){

        $scope.editCustomer.status = true;
    }else{
        $scope.editCustomer.status = false;
    }
}

函数 userInputDetected() 可以被忽略，因为它现在什么都不做。没有手表元素或类似的东西。当我尝试选择一个选项时，控制台仍然会记录这一点：

setStatus( true )
setStatus( active )

或

setStatus( false )
setStatus( inactive )

由于该项目使用 uglify 并将所有内容放在一个 JS 中，因此很难调试。有没有人有同样的问题或知道发生了什么？提前致谢！

【问题讨论】：

select 中的选项可以在 $scope.status 中找到，因为下拉列表是由 repeat="s in status" 生成的

标签： javascript jquery html angularjs forms

【解决方案1】：

我假设它正在发生，因为您将事件绑定到 ng-click，并且要从下拉菜单中选择一个选项，您总是必须执行两次单击。由于您使用的是 angular-ui，因此您应该在 ui-select 中使用“on-select”指令。

用法：

<ui-select ng-model="editCustomer.status" on-select="someFunction($item, $model)">

来自文档：

在选择项目时发生

【讨论】：

【解决方案2】：

这可能与 ng-click 直接分配给元素的事实有关，并且它们可能重叠，因为它们可能是虚拟/非标准元素（并且取决于 angular-bootstrap 是否使用 replace: true 或不用于这些)。

最安全的方法是拥有自己的元素，例如跨度，并将 ng-click 分配给它：

<ui-select-choices repeat="s in status">
  <span ng-click="setStatus($select.selected)">{{s}} </span>
</ui-select-choices>

【讨论】：