Angular $compile for dynamic content

Question

Using Angular 1.5, I want to use a generic "overlay" component to display other components within a modal. I'd like to pass in other components to be rendered within the overlay.

I thought I could use $compile in my controller, but the component does not render:

In my controller:

ctrl.appendComponent = function(component_type) {
    ctrl.$content.empty(); // this is the overlay element
    var component = '<' + component_type + '></' + component_type + '>';
    ctrl.$content.append($compile(component)($scope));
};

I've created the component I want to pass in, for example "foo" and get only an empty element in the DOM:

<foo></foo>

Even though, in the template for foo component, I have:

<h1>header</h1>
<p>body</p>

And expect to see:

<foo>
  <h1>header</h1>
  <p>body</p>
</foo>

What is $content? Please, provide MCVE, preferably as a fiddle/plunk. — Estus Flask
– Estus Flask, Commented Sep 13, 2016 at 22:20
Also how did you create the component? using 1.5 component(.. or with .directive(.. with replace:true? — PSL
– PSL, Commented Sep 13, 2016 at 22:22

Darin Cardin · Accepted Answer · 2016-09-13 23:37:42Z

1

Here is an example, but it looks like you are doing the same thing. I would suggest simplifying your code, it may be the case that something is not returning what you think it is.

                link: function(scope, iElem, tAttrs){
                            var html = "<div>hello</div>";

                            var content = $compile(html)(scope);
                            iElem.append(content);
                }

edited Sep 13, 2016 at 23:37

answered Sep 13, 2016 at 23:29

Darin Cardin

7571 gold badge4 silver badges10 bronze badges

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

1 Comment

shackleton Over a year ago

Thanks @Darin. After reviewing my code, I realized that I'd defined the component I was passing in using kebab-case instead of camel-case: App.component('foo-bar', ... instead of: App.component('fooBar', ...

Collectives™ on Stack Overflow

Angular $compile for dynamic content

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related