javascript – angular指令清除字段

我试图在我的离子应用程序中实现一个角度指令,在文本字段中添加一个“X”按钮,当单击该按钮清除文本时.代码基于此repo：https://github.com/amageed/angular-resetfield

我无法获得名为…的重置匿名函数.重置日志语句不显示,但链接语句执行：

.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);
            });
        }
    };
}]);

以下是HTML中的用法：

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

解决方法:

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

当模糊事件触发时,$scope.enabled变为false,因此在单击事件可以触发之前,按钮会立即消失.

What you need is an event that (always) fires before blur, namely ng-mousedown

您需要做的就是改变：

NG-点击= “复位();” &GT

至

NG-鼠标按下= “复位();” &GT

它的工作原理.

由于事件现在总是以正确的顺序触发,因此代码中没有任何其他内容可以更改.

X图标可以在页面的任何位置,它仍然可以工作.

如果您希望将其放在输入框上,只需添加：

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

到< i>标签.

请找到一个working plunker的角度指令清除字段代码.

了解click和mousedown事件之间的区别,please read this page.

并且要测试DOM事件的顺序,请check this pen.

———-

更新：如何处理Cordova环境的情况

我(姗姗来迟)意识到Cordova环境没有像浏览器那样处理事件.

This post给出了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-model这一事实有关吗？另外,我尝试将重置代码放入bind中,clear确实有效,但过滤器未重新应用“.

和

“是的,它适用于plunker,但不适用于ios sim.”

回答你的评论

我的答案完全基于您提供的指令代码和HTML代码.

你的问题是：“我无法获得名为的重置匿名函数…即重置日志语句不显示”

我尽可能精确地回答你的问题,解释问题并提供一个有效的说明来证明这一点：由于焦点事​​件优先,无法调用重置函数;当您通过ng-mousedown替换ng-click时,它可以正常工作,如提供的资源所详细,并在我提供的plunker中显示.

然后回答了原始帖子中的问题,解释了问题,并提供了有效的解决方案.

你提到ios.我刚刚在iPad上测试了我的plunker：它完美无缺.如果我提供的解决方案与之不兼容的特定设备,我将很乐意尝试找到解决方法.

现在,您似乎还有其他无关的问题,原始帖子中提供的代码无法预见这些问题.

如果是这种情况,请提出另一个问题;你可以在我的plunker中复制/粘贴代码,提供一个新的plunker和尽可能多的关于你当前问题的细节.

再次,我将很乐意尽力回答我的能力……

标签：javascript,angularjs,angularjs-directive,angular-directive
来源： https://codeday.me/bug/20190702/1360900.html