Angular.js $compile returns array of html but not actual html

Question

I have the following code:

app.directive('mySample', function($compile) {
    return {
        //template:"<input type='text' ng=model='sampleData'/> {{sampleData}} <br/>"
        link: function(scope, element, atts, controller) {
            var markup = "<input type='text' ng=model='sampleData'/> {{sampleData}} <br/>";  
            angular.element(element).html($compile(markup)(scope));
            console.log($compile(markup)(scope));
        }
    };
});

And I would expect it to generate an input, some span that's coupled via the scope and a break. However I get this output:

[[object HTMLInputElement], [object HTMLSpanElement], [object HTMLBRElement]]

I also tried the template, in comment here, separately and then commenting out the link part. That generates the input and break elements but not the span that shows the coupled model input sampleData.

I have a non-working sample at http://jsfiddle.net/KvdM/nwbsT/ that demonstrates it.

Solution 1

Try this:

element.html(markup);
$compile(element.contents())(scope);

Solution 2

Running the function returned by the $compile service gives you DOM elements rather than html. So you need to insert them into your page using append (or equivalent):

angular.element(element).append($compile(markup)(scope));

Solution 3

Maybe the easiest way is to use a hard-coded template rather than a dynamic generated one

<div ng-app="myApp">
    <my-sample sample-data="'test'"></my-sample>
</div>

var app = angular.module('myApp', []);

app.directive('mySample', function ($compile) {
    return {
        restrict: 'E',
        scope: {
            sampleData: '=sampleData'
        },
        template: "<input type='text'/> {{sampleData}} <br/>",
    };
});

FIDDLE

Comments

[Kris van der Mast]

That shows already the input but doesn't make the {{sampleData}} work.

[Kris van der Mast]

It renders out the input but not the {{sampleData}} getting updated. It keeps on showing test.

[Kris van der Mast]

How would I log the sampleData?

[AlwaysALearner]

{{sampleData}} does not work because you wrote ng=model instead of ng-model :)

[zs2020]

That is the data passed in in HTML.

[daleyjem]

Depending on the nature of which you're compiling, if you're coming from a non-angular event, it may require a scope.$apply() in order for your template to be rendered.

[basickarl]

How does one replace the contents of the element? This adds to it rather.

[Phrygian Moon]

probably just change "append" to "replaceWith" (I've not tried it)

[Kris van der Mast]

How do you mean? Can you provide a jsfiddle or relevant code sample?