angularjs directive with dynamic templates and string interpolation

Question

The idea is to replace the directive element with the dynamic template which refers to interpolated strings.

If I use element.html() in my directive then the strings are interpolated fine but this leaves the original custom directive html element.

If I use element.replaceWith() then strings are not interpolated. I guess it has related to scope but can't figure out what's wrong.

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

UPDATE

Found the solution. Using element.replaceWith($compile(html)(scope)); works.

Updated plunker: http://plnkr.co/edit/HyBP9d?p=preview

You can remove replace: true and transclude: true from your directive. — Mark Rajcok
– Mark Rajcok, Commented Mar 19, 2013 at 16:50

charlietfl · Accepted Answer · 2013-03-19 02:06:34Z

1

Not sure what objective is regarding replaceWIth. The problem is likely that when you replace an elememnt, you replace all events and data bound to it. This would include the angular scope for the element.

For demo provided could do it like this:

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: '='
            }
        };
    });

DEMO:http://plnkr.co/edit/QDxIwE?p=preview

answered Mar 19, 2013 at 2:06

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kamlesh Over a year ago

Thanks @charlietfl. For demo that could work. But in my real use case dynamic template could totally be different from other which depends on incoming 'value'.

Collectives™ on Stack Overflow

angularjs directive with dynamic templates and string interpolation

UPDATE

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

UPDATE

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related