Bind click event to a dynamic element created within a directive

Question

I thought I solved this, but I was wrong..... I've created a directive to allow me to clear a text input. Basically, when you start to type into the input field, the classic "X" icon appears on the right of the textbox. When you click it, the model is erased. This is my directive.

(function() {
    "use strict";
    var app = angular.module("myApp");

    app.directive("clearInput", ['$compile', function ($compile) {
        return {
            require: 'ngModel',
            scope: {},
            link: function (scope, element, attrs, ngModel) {

                if (element.next().length) {
                    element.next().insertBefore(element);
                }

                var tpl = '<span> <i class="icon ion-close-circled placeholder-icon clear-element"  ng-show="show" ></i></span>';
                var clear = angular.element(tpl);

                scope.setValue = function (val) {
                    ngModel.$setViewValue(val);
                    ngModel.$render();
                    scope.$apply();
                };

                clear.on('click',
                function () {
                    scope.setValue(null);
                });

                element.bind('blur', function () { scope.setValue(ngModel.$modelValue); });

                scope.$watch(function () {
                    return ngModel.$modelValue;
                }, function (val) {
                    scope.show = val === null ? null : val.length > 0;
                });

                $compile(clear)(scope);

                element.after(clear);
            }
        }
    }]);
})(); 

Now, When I created and tested the directive, I did it using plunker, and I included by mistake a very old ionic version (1.0.0-beta.5). In this scenario, the directive works like a charm.

http://plnkr.co/edit/5rGzl1?p=info

When I moved the directive into my application, I discovered that the click event I bind doesn't fire.So I forked the plunker and I used an updated ionic version (1.0.1), and in this case the click doesn't work (but the dblclick does..doh!).

http://plnkr.co/edit/DH6jjG?p=info

Does anyone knows how to fix it? Thanks!

Answer 1

I opened your second link and I just changed this

clear.on('click',
                function () {
                    scope.setValue(null);
                });

to this

element.on('click',
                function () {
                    scope.setValue(null);
                });

and it seems to work. Let me know if that's what you were trying to achieve :)

Answer 2

It works somehow by replacing the label tag with another one (like a div tag) in the home.html file, but of course you lose the label features (focus on the input when clicking the label text).

I tried to find a reason in the ionic changelogs but there was nothing relevant ( Ionic changelog ). Maybe it's worth posting a new issue on their Github project: Ionic issues .

Answer 3

I opened a ticket on Ionic GitHub, and this was the answer

This is because we use labels to set focus the the input. Any click/taps/touches that happen with a label element will attempt to set focus to a child input.

For what you need, using a div instead of a label will work fine.

So, it looks like the only thing to do is to wrap my element on a DIV (as I already did as a workaround).

Here the link to the ticket.

https://github.com/driftyco/ionic/issues/4205