AngularJS custom directive using event listener

Question

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: http://jsfiddle.net/Z6RzD/152/

Here is the section that I am having problems with:

  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();
}

And the corresponding functions that run with the event listener:

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

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!

Michael Benford · Accepted Answer · 2013-08-26 21:14:17Z

5

Try this:

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.

answered Aug 26, 2013 at 21:14

Michael Benford

14.1k3 gold badges62 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

sh3nan1gans Over a year ago

That's the ticket! Now I'm trying to add a clear text icon...I tried the following but to no avail: jsfiddle.net/Z6RzD/158 @Michael

pilau Over a year ago

Any specific reason for using $.bind and not $.on?

Michael Benford Over a year ago

@pilau Angular's jqLite used to have only bind in earlier versions. That's changed in version 1.2RCx as they've replaced bind with on.

pilau Over a year ago

That's interesting, because in jQuery, $.bind allows listening to custom (non-DOM) events triggered with $.event.trigger() while $.on does not. But that shouldn't matter at all if you have your Angular architecture right.

Shri Over a year ago

why is scope.$apply() used in the event handler function?

|

TApicella · Accepted Answer · 2018-10-11 17:01:18Z

0

Old question, but to address the actual issue:

I believe htmlTxtBox.addEventListener('focus', setFocus(), false); should have just setFocus instead to pass the reference to the function rather than call it within the addEventListener call.

answered Oct 11, 2018 at 17:01

TApicella

1511 silver badge1 bronze badge

Collectives™ on Stack Overflow

AngularJS custom directive using event listener

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related