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

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

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

或

您可以在ng-blure函数中设置$scope.visible = false;，而不是使用$scope.setValue。像：
控制器中的
：

$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>

Answer 2

这是因为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; };
}

请参阅uppdated示例：https://jsfiddle.net/uqs19rea/1/

Answer 3

问题是您的输入的String[] values = line.Split(':');是在onBlur触发之前处理的......您可以通过将ng-click()更改为ng-click来测试您的代码/ p>

添加ng-blur时不会触发角度ng-click

3 个答案: