angularjs – 如何强制ng-click优先于ng-blur事件?

前端之家收集整理的这篇文章主要介绍了angularjs – 如何强制ng-click优先于ng-blur事件?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
当我点击保存按钮,它触发一个ng-blur事件,我如何使按钮ng点击事件触发?我仍然希望ng-blur事件触发,如果我点击outsida按钮或输入字段。

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。 Mousedown事件在模糊事件之前触发。

然而,处理的mousedown可能会取消聚焦你的领域,而不会引发模糊事件。
如果您之后点击框外,模糊事件不会被触发(因为该字段已经模糊),所以在设置焦点后,您可能需要手动重新聚焦该字段 –
How to set focus on input field?

注意,通过使用这种方法,也可以使用右键单击(感谢Alexandros Vellis!)触发按钮,您可以在this official example中看到。

猜你在找的Angularjs相关文章