我在div上使用了ng-click
,它按预期工作,但当我在其他输入上使用ng-blur
时,div上的ng-click
停止工作。
工作代码[点击时调用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 点击输入将带下拉列表。单击下拉列表会在一个案例中将项目添加到选定列表,但在其他情况下则不会。
我试过调试。范围设置正确且可以访问。
答案 0 :(得分:12)
click
事件会在blur
之后触发,因此列表会在您点击之前被隐藏。 simple solution是使用mousedown
事件而不是click
:
ng-mousedown="addItem(item)"
以下是对plunkr的更新:http://plnkr.co/edit/sPGIb1afCayS1UiP73Q0?p=preview