使用ng-blur时,为什么ng-click不工作？

Question

我已经使用ng-click了div,它按预期工作,但是当我使用ng-blur其他一些输入时,ng-clickdiv上的工作停止了.

工作代码[点击时调用addItem(item)]

 <div ng-controller="TestController">
  <input type="text" ng-focus="show=true">
  <div ng-show="show" class="choosecont">
    Choose from selected
    <div ng-repeat="item in allItems" ng-click="addItem(item)" class="choose">{{item}}</div>
  </div>
  <div class="chosencont">
    Following are selected
    <div ng-repeat="item in selectedItems" class="chosen">{{item}}</div>
  </div>
</div>

破解的代码[addItem(item)未被调用]

 <div ng-controller="TestController">
  <input type="text" ng-focus="show=true" ng-blur="show=false">
  <div ng-show="show" class="choosecont">
    Choose from selected
    <div ng-repeat="item in allItems" ng-click="addItem(item)" class="choose">{{item}}</div>
  </div>
  <div class="chosencont">
    Following are selected
    <div ng-repeat="item in selectedItems" class="chosen">{{item}}</div>
  </div>
</div>

相关的JS代码

angular.module("myApp", [])
.controller("TestController", ["$scope", function($scope) {
  $scope.allItems = ["A", "B", "C", "D", "E"];
  $scope.selectedItems = [];
  $scope.addItem = function(item) {
    if ($scope.selectedItems.indexOf(item) == -1)
      $scope.selectedItems.push(item);
  }
}
]);

这是plunkr http://plnkr.co/edit/eI5dvczO2E1Cp1SBPgQx?p=preview 点击输入将带下拉列表.单击下拉列表会在一个案例中将项目添加到所选列表,但在其他情况下则不会.

我试过调试.范围设置正确,可以访问.

Answer 1

在click后事件触发blur,因此列表中,您可以单击它之前被隐藏.在简单的解决方案是使用mousedown,而不是事件click:

ng-mousedown="addItem(item)"

以下是对plunkr的更新:http://plnkr.co/edit/sPGIb1afCayS1UiP73Q0？p = preview