在angularjs指令链接功能更换滤芯 [英] replace element in angularjs directive linking function

问题描述

我创建一个＆LT;排＆GT; AngularJS指令，需要更换本身（＆LT;排＆GT; 标签不能在执行后的DOM用动态模板present），可以包含任何HTML code。

I'm creating a <row> AngularJS directive that needs to replace itself (the <row> tag must not be present in the DOM after execution) with a dynamic template that can contain any HTML code.

在使用更换问题：真正的是，它不与表的标签和模板动态选择工作

The problem in using replace: true is that it does not work with table's tags and that the template is dynamically chosen.

所以我想找到一种方法来替代该元素的链接功能，但没有成功。

So I'm trying to find a way to replace the element in the linking function, with no success.

使用jQuery的 .replaceWith（）中断 ngRepeat S代表未知的原因。

Using jQuery's .replaceWith() breaks ngRepeats for unknown reason.

任何提示？

下面是小提琴

推荐答案

您小提琴似乎pretty基本的，但你应该能够只使用 outerHTML

Your fiddle seems pretty basic but you should be able to just use outerHTML

element[0].outerHTML ='<div>I should not be red</div>';

更新小提琴

Updated fiddle

如果你要处理的 NG-重复您可以将您的物品绑定到一个范围性，在您编译模板中引用它们。一旦编译，你可以使用jQuery replaceWith（）

If you have to deal with ng-repeat you can bind your items to a scope property and reference them in your template that you compile. Once it is compiled you can use jQuery replaceWith()

HTML

<row items="items">***</row>

指令

.directive('row', function ($compile) {
    return {
        restrict: 'E',
        scope: {
            items: "="
        },
        link: function (scope, element, attrs) {
            var html ='<div ng-repeat="item in items">I should not be red</div>';
            var e =$compile(html)(scope);
            element.replaceWith(e);
        }
    };
});

NG-重复例如

这篇关于在angularjs指令链接功能更换滤芯的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！