ng-click이 ng-blur 이벤트보다 우선하도록 강제하려면 어떻게 해야 합니까?

ng-click이 ng-blur 이벤트보다 우선하도록 강제하려면 어떻게 해야 합니까?

저장 버튼을 클릭하면 ng-blur 이벤트가 트리거됩니다.ng-click 이벤트를 트리거하려면 어떻게 해야 하나요?버튼이나 입력란을 클릭하면 ng-blur 이벤트가 발생했으면 합니다.

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

});

대신ng-click,사용하다ng-mousedown머드다운 이벤트는 흐릿한 이벤트보다 먼저 발생합니다.

다만, 처리되고 있는 머드 다운에서는, 블러 이벤트가 발생하지 않고, 필드의 포커스가 흐려질 가능성이 있습니다.그런 다음 상자 밖을 클릭하면 흐릿한 이벤트가 발생하지 않습니다(필드가 이미 흐려져 있기 때문에). 따라서 포커스를 설정한 후 수동으로 필드를 다시 포커스로 설정해야 할 수 있습니다(입력 필드에 포커스를 설정하는 방법 참조).

이 방법을 사용하면 이 공식 예에서 볼 수 있듯이 오른쪽 클릭(Alexandros Vellis! 감사합니다)을 사용하여 버튼을 트리거할 수도 있습니다.

사용하지 않다ng-blur그 후, 바인드 합니다.$document와 함께click이벤트 - 편집 모드를 중지합니다.스코프가 파괴되면 이벤트를 바인드 해제해야 합니다.

실행하려는 경우 이전 이벤트 기능을 클릭합니다.ng-blur에 기능을 기입하는 것보다ng-mousedown대신 이벤트ng-click.

언급URL : https://stackoverflow.com/questions/18736750/how-can-i-force-ng-click-to-take-precedence-over-an-ng-blur-event