title: AngularJS custom directive using event listener
body: <p>I am trying to create a custom directive that contains a text box that is shown, expanded and focused when a user clicks a button. And when the user clicks away from the expanded text box it should minimize, disappear and then show the original button. 
  Here's what I have so far:
  <a href="http://jsfiddle.net/Z6RzD/152/" rel="nofollow">http://jsfiddle.net/Z6RzD/152/</a></p>
  
  <p>Here is the section that I am having problems with:</p>
  
  <pre><code>  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();
  }
  </code></pre>
  
  <p>And the corresponding functions that run with the event listener:</p>
  
  <pre><code>function setFocus()  {
          scope.$apply('showInput = true');
          console.log("setFocus: " + scope.showInput);    
      }
  function setNoFocus(){
    scope.$apply('showInput = false');
    console.log("setNoFocus: " + scope.showInput);
  }
  </code></pre>
  
  <p>My problem is that the setFocus and setNoFocus functions run no matter what. How can I structure these functions to where they run only when the textbox is focused or blurred?
  I appreciate any help. Thanks!</p>