web-dev-qa-db-fra.com

Comment puis-je forcer ng-click à avoir la priorité sur un événement ng-blur?

Lorsque je clique sur le bouton Enregistrer, il déclenche un événement ng-flou, comment puis-je faire en sorte que l'événement ng-click se déclenche à la place? Je souhaite toujours que l'événement ng-blur se déclenche si je clique à l'extérieur du bouton ou du champ de saisie.

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

});
angularjsblur
38
tidelipop

Au lieu de ng-click, utilisation ng-mousedown. Les événements Mousedown sont déclenchés avant les événements de flou.

Cependant, la mousedown gérée peut dé-focaliser votre champ sans que l'événement de flou ne soit déclenché. Si vous cliquez ensuite en dehors de la zone, l'événement de flou ne sera pas déclenché (car le champ est déjà flou), donc après avoir défini la mise au point, vous devrez peut-être recentrer la mise au point manuellement - voir Comment définir la mise au point sur le champ de saisie?

Notez qu'en utilisant cette approche, le bouton peut également être déclenché par un clic droit (merci Alexandros Vellis !) Comme vous pouvez le voir dans cet exemple officiel .

73
Uli Köhler

N'utilisez pas ng-blur puis, liez le $document avec click événement pour arrêter le mode d'édition. Et n'oubliez pas de dissocier l'événement lorsque la portée est détruite.

5
6220119

Si vous souhaitez exécuter la fonctionnalité d'événement de clic avant ng-blur que d'écrire vos fonctionnalités dans ng-mousedown événement à la place ng-click.

1
Rubi saini