CODEWITHSUNDEEP
angularjsblur
tidelipop
tidelipop

Reputation: 717

How can I force ng-click to take precedence over an ng-blur event?

When I click the save button it triggers an ng-blur event, how can I make the buttons ng-click event to trigger instead? I still want the ng-blur event to trigger if I click outsida the button or input field.

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

});

Upvotes: 38

Views: 20623

Answers (3)

Uli K&#246;hler
Uli K&#246;hler

Reputation: 13750

Instead of ng-click, use ng-mousedown. Mousedown events get fired before blur events.

However, the handled mousedown might un-focus your field without the blur event being fired. If you then click outside the box, the blur event won't be fired (because the field is already blurred), so after setting focus, you might need to re-focus the field manually - see How to set focus on input field?

Note that by using this approach, the button can also be triggered using right-click (thanks Alexandros Vellis!) as you can see in this official example.

Upvotes: 73

Rubi saini
Rubi saini

Reputation: 2535

If you want to run click event functionality before ng-blur than write your functionality in ng-mousedown event instead ng-click.

Upvotes: 1

6220119
6220119

Reputation: 809

Don't use ng-blur then, bind the $document with click event to stop edit mode. And remember to unbind the event when the scope is destroyed.

Upvotes: 5

Related Questions