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

ng-blurの関数呼び出しのために、ng-clickを実行しています。そう、あなたが$scope.setValue機能に$scope.visible = false;を設定することができますng-blure代わりに使用$scope.visible = false;

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

OR

を設定するために$timeoutを使用することができます。以下のような：コントローラで

：

$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

たときにリスト項目を意味clickイベントは、すでに隠されている前blurイベントが発生したためですクリックが発生します。

リストの非表示を遅らせることができます。

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

問題はng-click()が起動する前に、あなたの入力のonBlurが処理されているということです...あなたが変更することで、あなたのコードをテストすることができますの角度$timoutサービスを使用して、 ng-click〜ng-mouseover