Angular Directive 将模板分配给 Body 但保持相同的范围/控制器答案

【问题标题】：Angular Directive assign template to Body but keep same scope / controllerAngular Directive 将模板分配给 Body 但保持相同的范围/控制器
【发布时间】：2015-07-08 23:24:16
【问题描述】：

我一直在研究加载指令模板并将其分配给 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) { }]
        };
    }
]);

提前致谢！

编辑：
是否可以使用提供者/工厂来观察复选框的更改并更新弹出模板中的结果？

【问题讨论】：

stackoverflow.com/questions/20941568/…
我不希望替换当前元素，我希望将模板附加到正文中。

标签： javascript angularjs directive

【解决方案1】：

好的，我可能误解了你的问题，但如果你想将指令模板附加到你的正文中，你可以使用链接功能：

function link(scope, element, attrs) {

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

}

【讨论】：

关于您最近的编辑，将 jsperf 链接替换为其他测试人员的链接，请在进行此类大规模更改之前在元中寻求批准，特别是当链接仍然有效时。此评论在阅读后将被删除。