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](http://stackoverflow.com/help/mcve), preferably as a fiddle/plunk. — Estus Flask, Sep 13 '16 at 22:20
Also how did you create the component? using 1.5 component(.. or with .directive(.. with replace:true? — PSL, Sep 13 '16 at 22:22

Darin Cardin · Accepted Answer · 2016-09-13T23:37:42.920

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 '16 at 23:37

answered Sep 13 '16 at 23:29

Darin Cardin

627
1
4
10

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', ... ` – shackleton Sep 14 '16 at 14:35

Angular $compile for dynamic content

1 Answers1