angularjs - switch - ng-click function

¿Cómo puedo forzar el ng-click para que tenga prioridad sobre un evento ng-blur?

Question

Cuando hago clic en el botón guardar, desencadena un evento ng-blur, ¿cómo puedo hacer que los botones ng-click evento para desencadenar en su lugar? Todavía quiero que se active el evento ng-blur si hago clic fuera del botón o campo de entrada.

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: {}
        }
    };

});

Answer 1

En lugar de ng-click , usa ng-mousedown . Los eventos de Mousedown se disparan antes de desenfocar los eventos.

Sin embargo, el mousedown manejado podría des-enfocar su campo sin que se dispare el evento de desenfoque. Si luego hace clic fuera del cuadro, el evento de desenfoque no se disparará (porque el campo ya está borroso), por lo que después de establecer el foco, puede necesitar volver a enfocar el campo manualmente. Consulte ¿Cómo establecer el foco en el campo de entrada?

Tenga en cuenta que al usar este enfoque, el botón también se puede activar haciendo clic con el botón derecho (¡gracias Alexandros Vellis !) Como puede ver en este ejemplo oficial .

Answer 2

No utilice ng-blur , luego, vincule $document con click event para detener el modo de edición. Y recuerda desvincular el evento cuando se destruye el alcance.

Answer 3

Si desea ejecutar la funcionalidad de evento de clic antes de ng-blur que escribir su funcionalidad en evento ng-mousedown lugar ng-click .