Question

我正在使用Ionic-tabs-app。在我的一个模板中，我得到了一个div - 名为＆＃34; div_mask_content＆＃34; - 我在其中加载一个掩码 - 包含一些标签和输入 - 通过设置div的InnerHtml属性。因为div在设置InnerHtml属性后被重新解析，我必须更新输入元素的keyup-event，如下所示：

element.addEventListener('ng-keyup', $scope.onKeyUp);

我使用一个函数执行此操作，该函数尝试将eventlistener添加到要在keyup上调用的函数。不幸的是，onKeyUp的功能从未被调用过，我不明白为什么。所以我试着在我的Ionic-template中添加一个硬编码输入，它通过它的ng-keyup-event调用onKeyUp函数，这可以按预期工作：

<input ng-keyup="onKeyUp()" />

这是我的模板：

<ion-view view-title="Account">
    <ion-content>
        <div>
            <input ng-keyup="onKeyUp()" />
        </div>
        <div>
            <div id="div_mask_content"></div>
        </div>
        <div class="bar-footer">
            <ul class="list">
                <li class="row">
                    <div class="col">
                        <div class="text-center" style="margin-top:10px">
                            <ion-button id="btn_load_mask"
                                        class="button button-large button-positive"
                                        ng-click="load_mask()">Load mask</ion-button>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </ion-content>
</ion-view>

来自控制器的代码：

.controller('MyCtrl', function($scope) {

    // EventHandler for keyup-Event
    $scope.onKeyUp = function () {
        alert("keyup-Event was fired");
    };

    // Content der Maske wird geladen und Events wiederhergestellt
    $scope.load_mask = function () {
        var div_mask_content = document.getElementById("div_mask_content");

        if (div_mask_content != null) {
            alert("The content of the mask is loading");
            var mask_content = "<div id='content' class='list'><div class='item item-input-inset'><label>Value</label><input id='27' name='p16003_value' type='text' maxlength='7' placeholder='___,__' title='Please use format ###,##' pattern='^[+-]?\d{0,3}((\.|,)\d{1,2})?' /></div><div class='item item-input-inset'><label></label></div><div class='item item-input-inset'><label></label><input id='28' name='p16003_result' type='text' disabled maxlength='7' placeholder='___,__' title='Please use format ###,##' pattern='^[+-]?\d{0,3}((\.|,)\d{1,2})?' /></div></div>";
            div_mask_content.innerHTML = mask_content;

            // Renews the keyup-EventHandles of the input-elements
            renewKeyupEventHandle(div_mask_content);
        }

    };

    // Function for renewing the keyup-EventHandles of the input-elements
    var renewKeyupEventHandle = function (element) {
        if (element.nodeName == "INPUT") {
            // Here the function onKeyUp is added to the Event ng-keyup but will never be fired
            element.addEventListener('ng-keyup', $scope.onKeyUp);
        }

        if (element.hasChildNodes()) {
            for (var n = 0; n < element.childElementCount; n++) {
                renewKeyupEventHandle(element.childNodes.item(n));
            }
        }

    };

});

我不得不猜测我实际上有点困惑。任何帮助将不胜感激。

Answer 1

这将有效：

element.addEventListener('keyup', $scope.onKeyUp);

（'ng-keyup'不是本机JS事件）

但你最好使用“角度方式”

<input ng-keyup="onKeyUp()" />

添加到HTML输入的eventlistener的Keyup-Event不会在keyup

1 个答案: