Handling IE's clear button with AngularJS binding

The X button in input forms is native for IE10+ and you can`t do anything about it, but only hide it with CSS:

input[type=text]::-ms-clear {   display: none;}

Then you can create your own directive to mimic this kind of behaviour. Just create a span, position it inside of an input and add ng-click to it, which will clear the model value of the input.

I created this Angular directive for input text elements, which manually calls the element's change() event when the clear ('X') button is clicked. This fixed the problem on our project. I hope it helps others.

angular.module('app')    .directive('input', function () {        return {            restrict: 'E',            scope: {},            link: function (scope, elem, attrs) {                // Only care about textboxes, not radio, checkbox, etc.                var validTypes = /^(search|email|url|tel|number|text)$/i;                if (!validTypes.test(attrs.type)) return;                // Bind to the mouseup event of the input textbox.                  elem.bind('mouseup', function () {                    // Get the old value (before click) and return if it's already empty                    // as there's nothing to do.                    var $input = $(this), oldValue = $input.val();                    if (oldValue === '') return;                    // Check new value after click, and if it's now empty it means the                    // clear button was clicked. Manually trigger element's change() event.                    setTimeout(function () {                        var newValue = $input.val();                        if (newValue === '') {                            angular.element($input).change();                        }                    }, 1);                });            }        }    });

With thanks to this answer (Event fired when clearing text input on IE10 with clear icon) for the JavaScript code to detect the clear button click.

I was able to solve this using the following directive - derived from 0x783e's answer above. It may provide better compatibility with later versions of angular. It should work with $watches or parsers in addition to ng-change.

angular    .module('yourModuleName')    .directive('input', FixIEClearButton);FixIEClearButton.$inject = ['$timeout', '$sniffer'];function FixIEClearButton($timeout, $sniffer) {    var directive = {        restrict: 'E',        require: '?ngModel',        link: Link,        controller: function () { }    };    return directive;    function Link(scope, elem, attr, controller) {        var type = elem[0].type;        //ie11 doesn't seem to support the input event, at least according to angular        if (type !== 'text' || !controller || $sniffer.hasEvent('input')) {            return;        }        elem.on("mouseup", function (event) {            var oldValue = elem.val();            if (oldValue == "") {                return;            }            $timeout(function () {                var newValue = elem.val();                if (newValue !== oldValue) {                    elem.val(oldValue);                    elem.triggerHandler('keydown');                    elem.val(newValue);                    elem.triggerHandler('focus');                }            }, 0, false);        });        scope.$on('$destroy', destroy);        elem.on('$destroy', destroy);        function destroy() {            elem.off('mouseup');        }    }}