Angular 添加 ng-blur 时不会触发 ng-click

Question

我尝试结合使用 ng-click 和 ng-blur 但它会导致错误，ng-click 没有被触发。

我有输入，下面有选项列表，当输入集中时我会显示这些选项。

<div ng-app="myApp" ng-controller="MyCtrl">
  <input type="text"
    ng-model="value"
    ng-focus="onFocus()"
    ng-blur="onBlur()"
  >
  <ul ng-show="visible">
    <li ng-repeat="i in items" ng-click="setValue(i)">{{i}}</li>
  </ul>
</div>

我在列表中的项目上定义了 ng-click。它在模型中设置了新的值。它有效，但是当我添加隐藏输入模糊选项的功能时，新值不会更新。

这是我的js代码：

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.visible = false;
    $scope.items = ["Foo", "Bar", "Baz"];
    $scope.onFocus = function() {$scope.visible = true;};
    $scope.onBlur = function() {$scope.visible = false;};
    $scope.setValue = function(value) { $scope.value = value; };
}

myApp.controller('MyCtrl', MyCtrl)

这是完整的示例： https://jsfiddle.net/uqs19rea/

Answer 1

这是因为 blur 事件发生在 click 事件之前，这意味着列表项在点击发生时已经隐藏。

您可以延迟隐藏列表，例如通过使用 angular 的 $timout 服务：

function MyCtrl($scope, $timeout) {
    $scope.visible = false;
    $scope.items = ["Foo", "Bar", "Baz"];
    $scope.onFocus = function() {$scope.visible = true;};
    $scope.onBlur = function() {
        $timeout(function() {$scope.visible = false;}, 200);
    };
    $scope.setValue = function(value) { $scope.value = value; };
}

查看更新后的示例：https://jsfiddle.net/uqs19rea/1/

Answer 2

问题是在 ng-click() 触发之前处理了您输入的 onBlur ...您可以通过将 ng-click 更改为 [=13= 来测试您的代码]

Answer 3

因为 ng-blur 在执行 ng-click 之前调用函数。所以你可以使用 $timeout 设置 $scope.visible = false;

$timeout(function(){ // ensure that $timeout injected in your controller
   $scope.visible = false;
},100);

或

您可以在 $scope.setValue 函数中设置 $scope.visible = false; 而不是使用 ng-blure。喜欢：

在控制器中：

$scope.setValue = function(value) { 
    $scope.value = value; 
    $scope.visible = false;
};

和html:

<div ng-app="myApp" ng-controller="MyCtrl">
    <input type="text" ng-model="value" ng-focus="onFocus()">
    <ul ng-show="visible">
      <li ng-repeat="i in items" ng-click="setValue(i)">{{i}}</li>
    </ul>
 </div>

Angular 添加 ng-blur 时不会触发 ng-click

Angular ng-click not fired when ng-blur added

javascript

angularjs

angularjs-ng-click