angularjs – 如何强制ng-click优先于ng-blur事件?
发布时间:2020-12-17 08:35:18 所属栏目:安全 来源:网络整理
导读:当我点击保存按钮,它触发一个ng-blur事件,我如何使按钮ng点击事件触发?我仍然希望ng-blur事件触发,如果我点击outsida按钮或输入字段。 http://jsfiddle.net/tidelipop/wyjdT/ angular.module('MyApp',[]).filter("placeholder",function(){ return funct
当我点击保存按钮,它触发一个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可能会取消聚焦你的领域,而不会引发模糊事件。 注意,通过使用这种方法,也可以使用右键单击(感谢Alexandros Vellis!)触发按钮,您可以在this official example中看到。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |