我怎样才能发力纳克单击采取precedence了一个多NG-blur事件？ [英] How can I force ng-click to take precedence over an ng-blur event?
问题描述
当我点击保存按钮，它触发NG-blur事件，我怎样才能使按钮NG-单击事件，而不是触发？我仍然希望NG-模糊事件，如果我点击outsida按钮或输入字段触发。
http://jsfiddle.net/tidelipop/wyjdT/
angular.module（'MyApp的'，[]）.filter（占位符功能（）{
返回功能（文字，长度，结束）{
//console.log(typeof文本，文本，长度）;
如果（typeof运算文字===未定义||文字==''）{
文字=点击编辑......;
}
返回文本;
};
}）.directive（inlineEdit功能（编译$，$ Q）{
返回{
限制：A，
更换：真实，
模板：功能（tElement，tAttrs）{
VAR modelStr = tAttrs.inlineEdit，optionsStr = tAttrs.options，modelXtra =''，editElStr ='';
如果（tAttrs.type ===选择框）{
modelXtra ='。价值;
editElStr ='＆LT;选择NG秀=编辑模式NG-模糊=EndEdit中（\\''+ modelStr +\\'）NG模型=+ modelStr +'NG选项=a.value中的在'+ optionsStr +'＆GT;＆LT; /选择＆GT;';
}否则如果（tAttrs.type ==='文本区域'）{
editElStr ='＆LT; textarea的NG-秀=编辑模式NG-模糊=EndEdit中（\\''+ modelStr +\\'）NG模型=+ modelStr +'＆GT;＆LT; / textarea的＆GT;';
}其他{
editElStr ='＆LT;输入类型=文本NG-秀=编辑模式NG-模糊=EndEdit中（\\''+ modelStr +\\'）NG模型=+ modelStr +'/＆GT;';
}
回归'＆LT; DIV CLASS =身体与GT;'+
'＆LT;跨度NG隐藏=编辑模式NG点击=startEdit中（\\''+ modelStr +'\\'，\\''+ optionsStr +\\'）NG绑定=+ modelStr + modelXtra +'|占位符＆GT;＆LT; / SPAN＆GT;'+
editElStr +'＆LT;按钮NG秀=编辑模式NG点击=保存（）＆GT;保存＆LT; /按钮＆GT;'+
'＆LT; / DIV＆GT;';
}，
适用范围：真，
控制器：函数（$范围）{
$ scope.editMode = FALSE;
$ scope.save =功能（）{
的console.log（保存...）;
$ scope.editMode = FALSE;
};
$ scope.startEdit =功能（modelStr，optionsStr）{
的console.log（启动编辑模式...）;
//保存原来的价值，如果不保存恢复...
。$ scope.origValue = $ $范围的eval（modelStr）;
//如果选择框，并且无初值，做初始化为第一个选项
如果（typeof运算$ scope.origValue ==='对象'和;＆安培;！$ typeof运算== scope.origValue.value'字符串'）{
。$ $范围的eval（modelStr +=+ optionsStr +'[0]'）;
}
//开启编辑模式
$ scope.editMode =真;
};
$ scope.endEdit =功能（modelStr）{
的console.log（结束编辑模式...）;
//恢复原来的值
。$ $范围的eval（modelStr +'= origValue'）;
//关闭编辑模式
$ scope.editMode = FALSE;
};
}
}
}）
.controller（UserAdminCtrl功能（$范围）{
$ scope.options = {};
$ scope.options.cars = [
{关键：0，值：奥迪}，
{关键：1，值：宝马}，
{关键：2，值：沃尔沃}
];
$ scope.data_copy = {
用户：{
USER_ID：sevaxahe'，
评论：''，
我的轿车： {}
}
};}）;
而不是 NG-点击中，使用 NG-鼠标按下。鼠标按下事件之前模糊事件被解雇。
不过，处理鼠标按下可能会取消您的重点领域，而不模糊事件被解雇。
如果您再单击框外，模糊事件不会被解雇（因为该领域已经很模糊），因此将焦点设置后，您可能需要手动重新聚焦领域 - 见
如何将焦点设置输入字段？
请注意，通过使用这种方法，按钮也可以用鼠标右键单击触发（感谢亚历山德罗Vellis ！），你可以在这个官方例子看到的。
When I click the save button it triggers an ng-blur event, how can I make the buttons ng-click event to trigger instead? I still want the ng-blur event to trigger if I click outsida the button or input field.
http://jsfiddle.net/tidelipop/wyjdT/
angular.module('MyApp', [])
.filter("placeholder", function(){
return function (text, length, end) {
//console.log(typeof text, text, length);
if(typeof text === 'undefined' || text == ''){
text = 'Click to edit...';
}
return text;
};
})
.directive("inlineEdit", function($compile, $q){
return {
restrict: "A",
replace: true,
template: function(tElement, tAttrs){
var modelStr = tAttrs.inlineEdit, optionsStr = tAttrs.options, modelXtra = '', editElStr = '';
if(tAttrs.type === 'selectbox'){
modelXtra = '.value';
editElStr = '<select ng-show="editMode" ng-blur="endEdit(\''+modelStr+'\')" ng-model="'+modelStr+'" ng-options="a.value for a in '+optionsStr+'"></select>';
}else if(tAttrs.type === 'textarea'){
editElStr = '<textarea ng-show="editMode" ng-blur="endEdit(\''+modelStr+'\')" ng-model="'+modelStr+'"></textarea>';
}else{
editElStr = '<input type="text" ng-show="editMode" ng-blur="endEdit(\''+modelStr+'\')" ng-model="'+modelStr+'" />';
}
return '<div class="body">'+
'<span ng-hide="editMode" ng-click="startEdit(\''+modelStr+'\', \''+optionsStr+'\')" ng-bind="'+modelStr+modelXtra+' | placeholder"></span>'+
editElStr+'<button ng-show="editMode" ng-click="save()">save</button>'+
'</div>';
},
scope: true,
controller: function($scope){
$scope.editMode = false;
$scope.save = function(){
console.log("Saving...");
$scope.editMode = false;
};
$scope.startEdit = function(modelStr, optionsStr){
console.log("Start edit mode...");
// Store original value, to be restored if not saving...
$scope.origValue = $scope.$eval(modelStr);
// If selectbox and no initial value, do init to first option
if(typeof $scope.origValue === 'object' && typeof $scope.origValue.value !== 'string'){
$scope.$eval(modelStr+'='+optionsStr+'[0]');
}
// Turn on edit mode
$scope.editMode = true;
};
$scope.endEdit = function(modelStr){
console.log("End edit mode...");
// Restore original value
$scope.$eval(modelStr+'=origValue');
// Turn off edit mode
$scope.editMode = false;
};
}
}
})
.controller("UserAdminCtrl", function($scope){
$scope.options = {};
$scope.options.cars = [
{ "key": 0, "value": "Audi" },
{ "key": 1, "value": "BMW" },
{ "key": 2, "value": "Volvo" }
];
$scope.data_copy = {
user: {
user_id: 'sevaxahe',
comment: '',
my_car: {}
}
};
});
Instead of ng-click, use ng-mousedown. Mousedown events get fired before blur events.
However, the handled mousedown might un-focus your field without the blur event being fired. If you then click outside the box, the blur event won't be fired (because the field is already blurred), so after setting focus, you might need to re-focus the field manually - see How to set focus on input field?
Note that by using this approach, the button can also be triggered using right-click (thanks Alexandros Vellis!) as you can see in this official example.
这篇关于我怎样才能发力纳克单击采取precedence了一个多NG-blur事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
