angularjs - 具有动态模板和字符串插值的 angularjs 指令

Question

这个想法是用引用插值字符串的动态模板替换指令元素。

如果我在我的指令中使用 element.html() ，那么字符串会被很好地插值，但这会留下原始的自定义指令 html 元素。

如果我使用 element.replaceWith() 则不会插入字符串。我猜它与范围有关，但无法弄清楚出了什么问题。

Plunker：http ://plnkr.co/edit/HyBP9d?p=preview

更新

找到了解决方案。使用element.replaceWith($compile(html)(scope));作品。

更新的 plunker：http ://plnkr.co/edit/HyBP9d?p=preview

Answer 1

不确定目标是什么replaceWIth。问题很可能是当你替换一个元素时，你替换了所有绑定到它的事件和数据。这将包括元素的角度范围。

对于提供的演示，可以这样做：

app.directive('status', function($compile) {       

        var linker = function(scope, element, attrs) {
            element.contents().wrap('<h'+attrs.value+'>')
        };

        return {
            restrict: 'E',
            replace: true,
            template:'<div>{{value}}</div>',
            transclude: true,
            link: linker,
            scope: {
                value: '='
            }
        };
    });

演示：http ://plnkr.co/edit/QDxIwE?p=preview