Question

这是我的情况：我有一个字段，一旦用户双击，它就会编辑该字段。这很好，很有效。我有两个功能：ok和cancel。取消禁用编辑模式。 ATM，用户必须单击取消才能禁用编辑模式。我想要的是当用户点击页面上的任何其他位置时允许禁用编辑模式。我如何使用Angular实现这一目标？

编辑：我正在添加我的标记（注意：这是Jade）：

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-repeat。双击td元素时，它会user.editing为true，以便显示表单。 cancelEditing(user)使变量为false，只显示该字段。

我已添加ng-blur="cancelEditing()" on the tr , td ,范围and表单`，但没有一个有效。

任何想法我都缺少什么？

Answer 1

使用ng-blur将取消事件绑定到元素。当元素失去焦点时会触发。

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();
        }
    };
});

Answer 2

b1j的答案只有在元素获得焦点时才有效。 hm-double-tap指令是否在双击后聚焦元素？如果不是，则必须在editItem函数中触发焦点。

Answer 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

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

3 个答案: