如何强制ng-click优先于ng-blur事件？

当我点击保存button时，它会触发一个ng-blur事件，我怎样才能让buttonng-click事件触发呢？ 我仍然希望ng-blur事件触发，如果我点击outsidabutton或input字段。

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

Answer 1

用ng-mousedown代替ng-click 。 Mousedown事件在模糊事件之前被解雇。

然而，被处理的mousedown可能不会将焦点放在你的领域，而不会引发模糊事件。 如果您在框外单击，模糊事件将不会被触发（因为场已经模糊），所以在设置焦点之后，可能需要手动重新设置焦点 – 请参阅如何在input字段上设置焦点？

请注意，通过使用这种方法，也可以使用右键单击（感谢Alexandros Vellis ！）来触发button，正如您在此官方示例中所看到的那样。

Answer 2

不要使用ng-blur然后使用click事件绑定$document来停止编辑模式。 当范围被销毁时，记得解除事件。

Answer 3

如果要在ng-blur之前运行单击事件function，而不是在ng-mousedown事件中编写function，而不是ng-click 。