Angular directive injecting DOM element with click event

[John Easley]

The goal is to create a directive that can be attached to a textbox that, when the textbox has focus, an image/button will appear after the textbox and the image/button click event will fire a function contained within the directive. The goal is for this functionality to be entirely self-contained in the directive so it can be easily deployed in many pages or apps.

The image/button appears after the textbox with no problem but the click event of the button does not fire the function. I have created a plunkr with the example code.

 

In the plunk, line 15 defines a function called 'search,' which does nothing more than fire an alert. When the textbox has focus, the button appears as expected and line 34 calls the search function successfully, which means the function itself is working. However, the button's click event doesn't fire the search function.

Any help would be greatly appreciated!

[Sander Elias]

Hi John,

Ah, you found plunk already :)

have a look at this one. I moved your logic to the controller, and used controllerAs. This demystifies what is happening. If you have any question about what(or why) I did it this way, feel free to ask.

Regards

Sander

[John Easley]

Hi Sander,

Thanks for taking a look at it and for coming up with the variation. I like the solution. At different times, I had tried almost every part of your approach, except the controllerAs, but hadn't tried them in that combination. Looks like it will do the trick. I'm looking forward to getting into the office on Monday and giving it a try. I'll let you know what happens. 

Thanks again. 

John

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/PSstJnjgnsw/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[John Easley]

Sander,

That did the trick!  The controllerAs was the key.  A tiny bit of fiddling after that and it was working as planned.  Thank you very much for the help.

John