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

Bind click event to a dynamic element created within a directive

本文关键字：创建 动态 元素 指令 click 事件 绑定      更新时间：2023-09-26

我以为我解决了这个问题，但我错了.....我创建了一个指令，允许我清除文本输入。基本上，当您开始输入字段时，经典的"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

当我将指令移动到我的应用程序中时，我发现我绑定的点击事件没有触发。所以我分叉了柱塞，我使用了一个更新的离子版本(1.0.1)，在这种情况下，点击不起作用(但dblclick可以…doh!)。

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

有谁知道怎么修理它吗?谢谢!

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

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


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

，它似乎工作。如果这就是你想要达到的目标，请告诉我:)

它以某种方式通过在home.html文件中用另一个(如div标签)替换label标签来工作，但当然您会失去标签功能(在单击标签文本时关注输入)。

我试图在离子变化日志中找到一个原因，但没有任何相关的(离子变化日志)。也许值得在他们的Github项目上发布一个新问题:Ionic问题。

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

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

根据需要，使用div代替标签也可以。

所以，看起来唯一要做的就是把我的元素包装在DIV上(就像我已经做的那样，作为一种变通方法)。

这是车票的链接。

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

相关文章：