web-dev-qa-db-ja.com

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

});
angularjsblur
38
tidelipop

の代わりに ng-click、 使用する ng-mousedown。マウスダウンイベントは、ぼかしイベントの前に発生します。

ただし、処理されたマウスダウンは、blurイベントが発生せずにフィールドのフォーカスを解除する場合があります。その後、ボックスの外側をクリックすると、blurイベントは発生しません（フィールドは既にぼけているため）。したがって、フォーカスを設定した後、フィールドを手動で再フォーカスする必要がある場合があります-参照 フォーカスの設定方法入力フィールドに？

このアプローチを使用すると、 この公式の例 に見られるように、右クリックを使用してボタンをトリガーすることもできます（ありがとう Alexandros Vellis ！）。

73
Uli Köhler

ng-blurを使用しないで、$documentをclickイベントにバインドして、編集モードを停止します。また、スコープが破棄されたときにイベントをアンバインドすることを忘れないでください。

5
6220119

ng-blurの前にクリックイベント機能を実行する場合は、ng-mousedownイベントではなくng-clickイベントに機能を記述します。

1
Rubi saini