Подтвердить что ты не робот

Как заставить ng-click иметь приоритет над событием ng-blur?

Когда я нажимаю кнопку "Сохранить", он запускает событие ng-blur, как я могу заставить кнопки ng-click event запускать вместо этого? Я все еще хочу, чтобы событие ng-blur запускалось, если я нажимаю на кнопку "atida" или поле ввода.

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

});
4b9b3361

Ответ 1

Вместо ng-click используйте ng-mousedown. События Mousedown срабатывают до размытия событий.

Однако обработанная mousedown может не фокусировать ваше поле без события размытия. Если вы затем щелкните за пределами поля, событие размытия не будет запущено (потому что поле уже размыто), поэтому после настройки фокуса вам может потребоваться повторно сфокусировать поле вручную - см. Как установить фокус на поле ввода?

Обратите внимание, что с помощью этого подхода кнопка также может быть запущена с помощью щелчка правой кнопкой мыши (спасибо Alexandros Vellis!), как вы можете видеть в этот официальный пример.

Ответ 2

Не используйте ng-blur, затем привяжите $document с событием click, чтобы остановить режим редактирования. И не забудьте отменить событие, когда область действия будет уничтожена.

Ответ 3

Если вы хотите запустить функцию события клика перед ng-blur, чем писать свои функции в ng-mousedown событии вместо ng-click.