Javascript 角度指令将模板分配给主体，但保持相同的作用域/控制器

我一直在研究加载指令模板并将其分配给document.body（仅使用一个指令/模板）的最佳实践。

我有一个文本框，用于搜索，当文本框聚焦时，应该会出现一个弹出窗口。我知道，这听起来很熟悉，但我想自定义弹出窗口中显示的值，这就是我需要的模板。。。

因此，我希望观察搜索输入中的更改，并在已添加到正文的模板中查看结果（并将其全部保存在一个指令/提供程序中）。
实现这种行为的最佳实践是什么？我已经找了几个小时了，但找不到合适的解决办法

app.directive("rdSearch", [
    function () {
        return {
            restrict: 'A',
            scope: {
                onSearch: "=onSearch" // callback for processing search-query
            },
            //templateUrl: window.baseUrl + "some url"
            replace: true,
            link: ["$scope", function (scope) { }],
            controller: ["$scope", function (scope) { }]
        };
    }
]);

提前感谢

编辑：

---

是否可以使用提供商/工厂查看复选框的更改并更新弹出模板中的结果？

好的，我可能误解了您的问题，但如果您想将指令模板附加到身体上，可以使用链接功能：

function link(scope, element, attrs) {

        angular.element(document.body).append(element);

}

---

好的，我可能误解了您的问题，但如果您想将指令模板附加到身体上，可以使用链接功能：

function link(scope, element, attrs) {

        angular.element(document.body).append(element);

}

---

我不希望当前元素被替换，我希望模板被附加到正文中。我不希望当前元素被替换，我希望模板被附加到正文中。关于您最近的编辑，用另一个测试人员的链接替换jsperf链接，请在进行这样的大规模更改之前在meta中寻求批准，尤其是当链接仍然有效时。此评论在阅读后将被删除。关于您最近的编辑，将jsperf链接替换为其他测试人员的链接，请在进行此类大规模更改之前在meta中寻求批准，尤其是在链接仍然有效的情况下。此评论在阅读后将被删除。