이벤트 리스너를 사용하는 AngularJS 사용자 지정 지시문

Question

사용자가 단추를 클릭 할 때 확장되고 집중되는 텍스트 상자가 포함 된 사용자 지정 지정 문을 만들려고합니다. 사용자가 확장 된 텍스트 상자를 클릭하면 원래의 단추가 최소화되고 사라져서 표시됩니다. 는 여기에 지금까지이 작업은 다음과 같습니다

if (htmlTxtBox.addEventListener !== undefined) { 
    console.log("first"); 

    htmlTxtBox.addEventListener('focus', setFocus(), false); 
    //this function is automatically called even when textBox is in focus    
    //htmlTxtBox.addEventListener('blur', setNoFocus(), false); 
    console.log("ifHasFocus: " + scope.showInput); 
} else if (htmlTxtBox.attachEvent != undefined) { 
    console.log("second"); 
    htmlTxtBox.attachEvent('onfocus', setFocus()); 
    htmlTxtBox.attachEvent('onblur', setNoFocus()); 
} else { 
    console.log("third"); 
    htmlTxtBox.onmouseover = setFocus(); 
    htmlTxtBox.onmouseout = setNoFocus(); 
} 

을 그리고 이벤트 리스너를 통해 실행 해당 기능 :

function setFocus() { 
     scope.$apply('showInput = true'); 
     console.log("setFocus: " + scope.showInput);  
    } 
function setNoFocus(){ 
    scope.$apply('showInput = false'); 
    console.log("setNoFocus: " + scope.showInput); 
} 

여기 http://jsfiddle.net/Z6RzD/152/

내가 문제가 오전 섹션 내 문제는 무엇이든간에 setFocus 및 setNoFocus 함수가 실행된다는 것입니다. 어떻게 이러한 기능을 텍스트 상자가 집중되거나 흐려질 때만 실행되도록 구조화 할 수 있습니까? 모든 도움에 감사드립니다. 감사!

Answer 1

이 시도 :

myApp.directive('replybox', function($timeout) { 
    var linkFn = function(scope, element, attrs) {  
     scope.showInput = false; 

     var button = element.find('button');   
     var input = element.find('input'); 

     button.bind("click", function() { 
      scope.showInput = true; 
      scope.$apply(); 

      input[0].focus(); 
      input.css({"width":"300px","transition":"1s"});    
     }); 

     input.bind('blur', function() { 
      scope.showInput = false;    
      $timeout(function() { scope.$apply(); }, 1000); 

      input.css({'width':'0px', 'transition':'1s'}); 
     }); 
    };  
... 

jsFiddle here.