我希望我正在创建的指令出现在该指令出现的模板范围之外的元素内。
我的问题是我试图让灯箱在页面的所有内容上呈现，而不仅仅是在呈现页面的模板中呈现。
假设采用以下结构，我希望该my-directive指令在的范围内运行，containerController但我希望将my-directive的模板呈现为#lightbox .content。完成此任务的“角度”方式是什么？
<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>
这是$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应用程序之外，并且仍然通过原型继承绑定到控制器的作用域。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句