Question

我已经创建了一个AngularJS指令。该指令需要将HTML元素作为body元素的子元素插入。此元素需要包含另一个自定义组件，定义为指令。

我已经尝试transclude指令，这不允许我达到预期的结果;将元素放置为body的直接子元素。我想到的一种方法是以某种方式从templateUrl抓取标记，并在关闭body标记之前将“有角度地”注入DOM。

我真的试图保持开放的态度，每天使用AngularJS的概念，这些“事情”正在变得困难。

Answer 1

在指令的link函数中，尝试以下操作：

link: function(scope, element, attrs) {
    // The template of the widget to be added elsewhere.
    // This is different than your directive's own template.
    var tpl = '<div>some body widget</div>';

    // Compile your template, defining a custom cloneAttachFn
    // to attach the element where you want in the DOM.
    var appended = $compile(tpl)(scope, function(clonedElement) {
       $('body').append(clonedElement);
    });
}

这样做的好处是，您的附加模板的编译范围与其“兄弟”指令相同。您可以在$scope上设置触发摘要周期的属性;从附加模板访问控制器中定义的范围方法;以及你期望能够做到的所有其他正常指令。

尽管拉伸，这仍然像Angular一样。也许我错过了一些东西，但这种方法似乎对我有用。

另外 - 请务必将$compile注入您的指令，并确保对范围destroy进行清理：

scope.$on('$destroy', function() {
    appended.remove();
});

文档：https://docs.angularjs.org/api/ng/service/$compile

创建将HTML插入其使用位置之外的指令

1 个答案: