为什么在使用 ng-blur 时 ng-click 不起作用?
Why doesn't ng-click work when ng-blur used?
我在 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
单击将带来下拉菜单的输入。在一种情况下单击下拉列表会将项目添加到选定列表,但在其他情况下则不会。
我试过调试。范围设置正确并且可以访问。
click
事件在 blur
之后触发,因此列表在您能够单击它之前被隐藏。 simple solution 是使用 mousedown
事件而不是 click
:
ng-mousedown="addItem(item)"
这是对您的 plunkr 的更新:http://plnkr.co/edit/sPGIb1afCayS1UiP73Q0?p=preview
我在 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 单击将带来下拉菜单的输入。在一种情况下单击下拉列表会将项目添加到选定列表,但在其他情况下则不会。
我试过调试。范围设置正确并且可以访问。
click
事件在 blur
之后触发,因此列表在您能够单击它之前被隐藏。 simple solution 是使用 mousedown
事件而不是 click
:
ng-mousedown="addItem(item)"
这是对您的 plunkr 的更新:http://plnkr.co/edit/sPGIb1afCayS1UiP73Q0?p=preview