Aquí está mi situación: tengo un campo que una vez que el usuario hace doble clic, editará el campo. Eso está bien y funcionando. Tengo dos funciones: ok y cancel. Cancelar deshabilita el modo de edición. ATM, el usuario debe hacer clic en cancelar para deshabilitar el modo de edición. Lo que me gustaría es permitir que se desactive el modo de edición cuando el usuario haga clic en cualquier otro lugar de la página. ¿Cómo puedo lograr esto con Angular?

EDITAR: estoy agregando mi marcado (Nota: esto es 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

Como puede ver, tengo una repetición hg en el usuario. Cuando hace doble clic en el elemento td, hace que user.editing sea verdadero para que aparezca el formulario. cancelEditing(user) hace que la variable sea falsa y solo se muestra el campo.

He agregado ng-blur="cancelEditing()" on the tr , td , span and form` y nada de eso funcionó.

Alguna idea de lo que me estoy perdiendo?

0
WagnerMatosUK 31 ago. 2014 a las 21:58

3 respuestas

La mejor respuesta

Use ng-blur para vincular su evento de cancelación al elemento. Se disparará cuando el elemento pierda el foco.

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

Nota: La función de cancelación debe estar dentro del alcance .

Documentos ngBlur angulares


Actualización de comentarios:

Dé foco al elemento de entrada cuando se active su evento de doble pestaña haciendo que el campo sea editable. Es probable que su evento de desenfoque no se active porque el elemento de entrada nunca tuvo foco.

Puede hacerlo desde dentro de su función editItem o desde dentro de la directiva.

Como ejemplo:

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();
        }
    };
});
2
Timeout 1 sep. 2014 a las 18:57

La respuesta de b1j funcionaría solo si el elemento se enfoca. ¿La directiva hm-double-tap enfoca el elemento después de hacer doble clic? Si no, tendrá que activar el foco en la función editItem.

-2
Sridhar Chidurala 31 ago. 2014 a las 18:43

Otro enfoque sería manejar el evento click en cualquier otro elemento como este:

$('#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
stefanr 31 ago. 2014 a las 18:13