0

我有一个动态加载指令的下拉列表。当我选择“选项 a”时，它会加载“指令 a”，当我选择“选项 b”时，它会加载“指令 b”。然而，当第二个指令被加载并且 DOM 被新指令覆盖时，angular 似乎仍然作用于刚刚删除的指令以及新指令。

这是我的代码中的一个片段，因此您可以看到正在发生的事情。

    // change event on dropdown list
    function onSelection(e, args) {
        if (args) {
            ctl.build(args.type || "integer");
        }
    }


    /** build the relevant directive based on the type */
    function build(type) {
        type = type.toLowerCase();
        var directive = "<rep-"+type+"-control args='filter.args'></rep-"+type+"-control>";
        var control = $element.find("#control");

        // only compile the new control so we don't duplicate ng events on the outer directive
        control.html(directive);
        $compile(control.contents())($scope);
    }

这只是挂钩到更改事件，并运行“构建”。Build 接受给定的参数（这是所选选项的值）并加载具有相同名称的指令"<rep-option-control>"。它将它加载到特定的 DOM 元素中，并编译该元素。

指令 A 具有“文本”类型的输入，指令 B 具有“数字”类型的输入。如果我先加载指令 B，然后加载指令 A 并将内容输入到输入中（type='text'），我会收到此错误：https ://docs.angularjs.org/error/ngModel/numfmt?p0=test这清楚地表明我正在尝试将字符串内容输入到数字输入中。

这意味着即使我运行它control.html(directive)，$compile旧指令仍然有效。

有谁知道我如何阻止这一切？

4

0 回答 0