Apply delay on ng-blur

Я использую ng-focus и ng-blur, чтобы показать/скрыть кнопку. на focus ввода, кнопка показана и на blur скрыта. Показать/скрыть выполняется с использованием ng-show. При нажатии этой кнопки вызывается функция.Apply delay on ng-blur

Live Demo

Проблема в том, что ng-blur нас называют первыми и кнопка становится скрыта до события нажатия обжигает, поэтому функция, которая должна быть вызвана из этой кнопки никогда не вызывалось.

Я уже исправил это, используя setTimeout(), но позже обнаружил, что это не очень хорошее решение. Есть ли другой способ исправить эту проблему?

источник

2014-11-19 Aditya Ponkshe

Что об этом http://jsfiddle.net/m8ab96su/3/ – dfsq

Что о полностью удалить кнопку и добавить логику на событие размытия. –

@dfsq, как я уже сказал, я могу, действительно удалить ng-blur. –

использование ng-mouseover и ng-mouseleave изменить кнопку

 <button ng-click="click()" ng-show="show||mouseover" ng-mouseover="mouseover=true" ng-mouseleave="mouseover=false">Click to change</button>

demo

источник

2014-11-19 06:33:08 Ebrahimi

Прошу прощения, но ваша скрипка не работает. –

ohhh я извиняюсь, это исправлено – Ebrahimi

круто, что работает! но не могли бы вы объяснить, что вы там сделали? –

Почему вы не меняете $scope.show=false; в событии нажатия кнопки.

Другими словами, удалите событие размытия, и событие click будет таким.

$scope.click = function(){ 
    alert("fuu") 
    $scope.text = "We changed it"; 
    $scope.show=false;  
}

источник

2014-11-19 06:13:21

Вы предполагаете, что я должен удалить ng-blur? –

Я не могу удалить ng-blur. Я хочу, чтобы эта кнопка была скрыта от размытия ввода. –

Хорошо, хорошо. Нам нужно думать в другом решении –

Я думаю, что с помощью BOOL может помочь вам определить состояние, если это необходимо, чтобы скрыть или показать кнопка. При наведении курсора на кнопку изменить bool, чтобы определить выполнение функции размытия.

пробуйте это пути:

HTML:

<div ng-app ng-controller="LoginController"> 
    <div>{{ text }}</div> 
    <input ng-focus="focus()" ng-blur="blur()"></input> 
    <button ng-click="click()" ng-show="show==true" ng-mouseover="mouseover()">Click to change</button> 
</div>

angularjs:

function LoginController($scope) { 
    $scope.show=false; 
    $scope.blurAll = true; 
    $scope.text = "this thing will change on click"; 

    $scope.focus = function(){ 
     console.log("buu"); 
     $scope.show=true; 
    } 
    $scope.blur = function(){ 
     if(blurAll){ 
      console.log("baaa"); 
      $scope.show=false; 
     } 
    } 

    $scope.click = function(){ 
      alert("fuu"); 
      $scope.text = "We changed it"; 
      $scope.show = false; 

    } 

    $scope.mouseover = function(){ 
     blurAll = false; 
    }; 
}

jsFiddle

источник

2014-11-19 06:54:23

использовать собственную директиву, которая ввести задержку

app.directive('ngBlurDelay',['$timeout',function($timeout){ 
return { 
    scope:{ 
     ngBlurDelay:'&' 
    }, 
    link:function(scope, element, attr){ 
    element.bind('blur',function(){ 
     $timeout(scope.ngBlurDelay,200); 
    }); 
    } 
}; 
}])

источник

2014-11-19 06:59:35 laurent

Apply delay on ng-blur

ответ

Смежные вопросы