Question

我以为我解决了这个问题，但我错了..... 我创建了一个指令，允许我清除文本输入。基本上，当您开始输入输入字段时，文本框右侧会出现经典的“X”图标。单击它时，模型将被删除。这是我的指示。

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

现在，当我创建并测试该指令时，我使用了plunker，并且我错误地包含了一个非常古老的离子版本（1.0.0-beta.5）。在这种情况下，该指令就像一个魅力。

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

当我将指令移动到我的应用程序中时，我发现我绑定的click事件不会触发。所以我分叉了plunker并使用了更新的离子版本（1.0.1），在这种情况下点击不会工作（但dblclick确实......！）。

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

有谁知道如何修复它？谢谢！

Answer 1

我打开了你的第二个链接，我刚刚改变了这个

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

到这个

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

它似乎有效。如果这是你想要达到的目的，请告诉我:)。

Answer 2

它通过在/usr/bin/python setup.py install文件中将label标记替换为另一个标记（如div标记）来以某种方式工作，但当然您丢失了标签功能（专注于输入单击标签文本时。）

我试图在离子变更日志中找到原因，但没有任何相关内容（Ionic changelog）。也许值得在他们的Github项目上发布一个新问题：Ionic issues。

Answer 3

我在Ionic GitHub上开了一张票，这就是答案

这是因为我们使用标签来设置焦点输入。任何   使用标签元素发生的点击/点击/触摸将尝试   将焦点设置为儿童输入。

根据您的需要，使用div代替标签可以正常工作。

所以，看起来唯一要做的就是将我的元素包装在DIV上（就像我已经做过的解决方法一样）。

这是票证的链接。

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

将click事件绑定到在指令中创建的动态元素

3 个答案: