javascript - 为什么在使用 ng-blur 时 ng-click 不起作用？

Question

我在 div 上使用了 ng-click 并且它按预期工作，但是当我在其他一些输入上使用了 ng-blur 时， ng-click div 上的 停止工作。

工作代码 [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 之后触发，因此列表在您能够单击它之前被隐藏。 simple solution是使用mousedown事件代替click:

ng-mousedown="addItem(item)"

这是对您的 plunkr 的更新:http://plnkr.co/edit/sPGIb1afCayS1UiP73Q0?p=preview