如何通过点击文档来触发功能

这是我的情况：我有一个字段，一旦用户双击，它将编辑该字段。这很好，工作。我有两个功能：ok和cancel。取消禁用编辑模式。 ATM，用户必须单击取消禁用编辑模式。我想要的是当用户点击页面上的其他任何地方时，允许禁用编辑模式。我怎样才能用Angular来实现这一点？如何通过点击文档来触发功能

编辑：我将我的标记（注意：这是玉）：

tr(ng-repeat="user in users | filter:searchText"s) 

    td(ng-dblclick="editItem(user)", hm-double-tap="editItem(user)", ng-blur="cancelEditing()") 

     span(ng-hide="user.editing") {{user.name}} 

     form(ng-submit="doneEditing(user)", ng-show="user.editing", class="inline-editing-2", ng-blur="cancelEditing()") 

      input(type="text", class="form-control", ng-model="user.name") 

     button(class="btn btn-success mr-1", ng-show="user.editing", ng-click="doneEditing(user)") 

      span(ng-click="doneEditing(user)").fa.fa-check-circle 

     button(class="btn btn-warning mr-1", ng-show="user.editing", ng-click="cancelEditing(user)") 

      span(ng-click="cancelEditing(user)").fa.fa-times-circle

正如你所看到的，我已经有了用户HG-重复。当双击td元素时，它使user.editing为真，以便显示表格。 cancelEditing(user)使变量为false，只显示字段。

我已经添加ng-blur="cancelEditing()" on the tr , td ,范围and表单`并没有工作。

任何想法我错过了什么？

来源

2014-08-31 WagnerMatosUK

您可以使用模糊。 – Satpal 2014-08-31 18:07:59

我假设你想要一个“内联编辑器”，为什么不使用现有的编辑器，如：http://vitalets.github.io/angular-xeditable/ – MiTa 2014-08-31 19:12:01

使用ng-blur将您的cancel事件绑定到元素。当元素失去焦点时它会发射。

IE：<input ng-blur="cancel()" />

注：取消功能必须范围内。从评论

Angular ngBlur Docs

更新：

给输入元素焦点时，你的双标签事件触发使现场编辑。您的模糊事件可能不会触发，因为输入元素从未拥有焦点。

你可以从你的editItem函数内部或从指令内部做到这一点。

举个例子：

yourApp.directive('hmDoubleTap', function(){ 
    return function(scope, element, attr){ 
     if(doubleTap) { 
      // Fire editItem(user) 
      // You could add your .focus() inside editItem(). 

      // Or focus the first input element at the end of the directive. 
      element.find("input")[0].focus(); 
     } 
    }; 
});

来源

2014-08-31 18:07:43 Timeout

不幸的是它没有工作。我用我的完整代码编辑了一些代码。我试过在几个元素（td，tr，span，input和form）上添加ng-blur =“cancelEditing（）”，但都没有成功。有什么建议么？ – WagnerMatosUK 2014-08-31 18:31:47

-3

另一种方法是处理这样的任何其他元素上的click事件：

$('#field-no-edit').click(function() { 
    $(this).hide(); 
    $('#field-edit').show().focus(); 
}); 
$('body').on('click', function(e){ 
    console.log($(e.target).attr('id')); 
    if ($(e.target).attr('id') != 'field-no-edit') { 
     console.log('not'); 
     $('#field-no-edit').text($('#field-edit').val()); 
     $('#field-edit').hide(); 
     $('#field-no-edit').show(); 
    } 
});

JSFiddle

来源

2014-08-31 18:13:26 stefanr

模糊操作不起作用。 – Sid 2014-08-31 18:23:07

-2

B1J的回答只会如果工作元素获得焦点。在双击后，hm-double-tap指令是否会将元素聚焦？如果没有，你将不得不在editItem函数中触发焦点。

来源

2014-08-31 18:43:46

目前它不会，但实际上这将是一个很好的补充。我如何将焦点添加到我的功能？ – WagnerMatosUK 2014-08-31 18:45:53

在editItem函数中尝试如下所示：user.target.focus（）; – 2014-08-31 18:54:27

如何通过点击文档来触发功能

回答

相关问题