javascript - Angular Js の動的に読み込まれたディレクティブは、DOM がクリアされた後もアクティブです

Question

ディレクティブを動的にロードするドロップダウン リストがあります。「オプション a」を選択すると「ディレクティブ a」がロードされ、「オプション b」を選択すると「ディレクティブ b」がロードされます。ただし、2 番目のディレクティブが読み込まれ、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);
    }

これは単に change イベントにフックして、「ビルド」を実行します。Build は、指定された引数 (選択されたオプションの値) を受け取り、同じ名前のディレクティブをロードします"<rep-option-control>"。それを特定の DOM 要素にロードし、その要素をコンパイルします。

ディレクティブ A には「テキスト」型の入力があり、ディレクティブ B には「数値」型の入力があります。最初にディレクティブ B をロードし、次にディレクティブ A をロードして入力 (type='text') にコンテンツを入力すると、次のエラーが発生します: https://docs.angularjs.org/error/ngModel/numfmt?p0=testこれは、数値入力に文字列コンテンツを入力しようとしていることを明確に示しています。

これは、実行control.html(directive)し$compileても、古いディレクティブがまだアクティブであることを意味します。

これを止める方法を知っている人はいますか？