Angular transparent field directive

Question

I am trying to implement the angular directive in my ionic application to add an "X" button to a text box that deletes text when clicked. Code based on this repo: https://github.com/amageed/angular-resetfield

I can’t get the anonymous reset function called ... Ie the log reset operator is not displayed, but the communication operator:

.directive('resetField', ['$compile', '$timeout', function($compile, $timeout) {
    return {
        require: 'ngModel',
        scope: {},
        link: function(scope, el, attrs, ctrl) {

            console.log('linking ');

            // limit to input element of specific types
            var inputTypes = /text|search|tel|url|email|password/i;
            if (el[0].nodeName === "INPUT") {
                if (!inputTypes.test(attrs.type)) {
                    throw new Error("Invalid input type for resetField: " + attrs.type);
                }
            } else if (el[0].nodeName !== "TEXTAREA") {
                throw new Error("resetField is limited to input and textarea elements");
            }

            // compiled reset icon template
            var template = $compile('<i ng-show="enabled" ng-click="reset();" class="icon ion-close reset-field-icon"></i>')(scope);
            el.addClass("reset-field");
            el.after(template);

            scope.reset = function() {
                console.log('resetting');
                ctrl.$setViewValue(null);
                ctrl.$render();
                $timeout(function() {
                    el[0].focus();
                }, 0, false);
                scope.enabled = false;
            };

            el.bind('input', function() {
                scope.enabled = !ctrl.$isEmpty(el.val());
            })
            .bind('focus', function() {
                $timeout(function() {
                    scope.enabled = !ctrl.$isEmpty(el.val());
                    scope.$apply();
                }, 0, false);
            })
            .bind('blur', function() {
                $timeout(function() {
                    scope.enabled = false;
                    scope.$apply();
                }, 0, false);
            });
        }
    };
}]);

Here is the use in HTML:

<input type="text" placeholder="Search" ng-model="query" autocorrect="off" reset-field>

Answer 1

The problem arises because the event blur(always) fires before the event click.

blur , $scope.enabled false, , click .

- , () blur, ng-mousedown

---

, , :

ng-click="reset();">

ng-mousedown="reset();">

.

---

, .

X , .

, :

style="position:relative;right:15px;top:1px;cursor: pointer;cursor: hand;"

<i>.

---

angular directive clear field.

---

click mousedown, , .

DOM, .

----------

:

I ( ) , Cordova , .

mousedown, mouseup mousemove.

touchstart mousedown, ng-mousedown="reset();"> ng-touchstart="reset();">;

ng-touchstart , github repo ​​, :

.directive("ngTouchstart", function () {
  return {
    controller: function ($scope, $element, $attrs) {
      $element.bind('touchstart', onTouchStart);

      function onTouchStart(event) {
        var method = '$scope.' + $element.attr('ng-touchstart');
        $scope.$apply(function () {
          eval(method);
        });
      };
    }
  };
});

Cordova, ...

----------

: , , :

" , - , ng- ? , reset bind, , ."

", , ios."

---

HTML-.

: " reset, ... I.e. "

, , : reset , ; ng-click ng-mousedown, , , .

, .

---

ios. iPad: . , , , , .

, , , .

, ; / , .

, ...

Answer 2

, JS Bin

:

class="icon ion-close reset-field-icon"

awesomes:

class="fa fa-times-circle"

.

, . , .