Question

我想要一个我创建的指令出现在指令出现的模板范围之外的元素中。

我的问题是，我试图让一个灯箱渲染所有网页的内容，而不仅仅是渲染它的模板中的内容。

假设下面的结构，我希望my-directive指令在containerController范围内运行，但我喜欢my-directive的模板要呈现为#lightbox .content。什么是＃angular;＆＃39;如何实现这个目标？

<body>
    <div id="container" ng-controller="containerController">
        <my-directive show="directiveVisible"></my-directive>
    </div>

    <div id="lightbox">
        <div class="content"><!-- my-directive template gets rendered here --></div>
    </div>
</body>

Answer 1

这是$compile服务的工作。您可以编译模板（不是指令的模板 - 将其留空以便在指令的位置不出现任何内容）并将编译的元素放在DOM中的任何位置。您还必须记住在销毁指令范围时从DOM中删除该元素。所以一些非常简单的代码将是：

app.directive("myDir", function($compile) {
    return {
        restrict: "E",
        link: function(scope, elem, attrs) {
            var target = angular.element(document.getElementById(attrs.target));
            var compiled = $compile('<input type="text" ng-model="data.name" />')(scope);
            target.append(compiled);
            scope.$on("$destroy", function() {
                target.empty();
            });
        }
    };
});

示例小提琴：http://jsfiddle.net/3nkp9p9y/

您会注意到编译的<input>出现在指令之外，实际上也在Angular应用程序之外，并且仍然绑定到具有原型继承的控制器范围。

Answer 2

如果您的灯箱在任何AngluarJs控制器的范围之外，那么您需要通过类似jQuery的选择器（但是从您的控制器执行，而不是从指令执行）。否则，您可以使用$rootScope传递信息。 $rootScope是所有范围的父级。

在containerController中，注入$rootScope然后：

$rootScope.displayTemplate = true; // or false

控制灯箱的控制器中的

：

$scope.displayTemplate = $rootScope.displayTemplate

和：

<div id="lightbox">
    <div class="content"><div ng-include="yourTemplate" ng-show="displayTemplate"></div></div>
</div>

在AngularJS中，如何将指令绑定到指令的根元素以外的元素中？

2 个答案: