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.

AlwaysALearner · Accepted Answer · 2013-07-26 13:51:15Z

15

Try this:

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

answered Jul 26, 2013 at 13:51

AlwaysALearner

43.9k9 gold badges98 silver badges78 bronze badges

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

3 Comments

Kris van der Mast Over a year ago

How would I log the sampleData?

AlwaysALearner Over a year ago

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

daleyjem Over a year ago

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.

Derek Ekins · Accepted Answer · 2013-07-26 13:37:57Z

10

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));

answered Jul 26, 2013 at 13:37

Derek Ekins

11.4k6 gold badges63 silver badges73 bronze badges

3 Comments

Kris van der Mast Over a year ago

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

basickarl Over a year ago

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

Derek Ekins Over a year ago

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

zs2020 · Accepted Answer · 2013-07-26 13:46:51Z

1

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

answered Jul 26, 2013 at 13:46

zs2020

54.7k30 gold badges157 silver badges223 bronze badges

2 Comments

Kris van der Mast Over a year ago

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

zs2020 Over a year ago

That is the data passed in in HTML.

Carlos León · Accepted Answer · 2014-09-16 16:46:44Z

-1

Depends on what kind of data should to be compiled, some times Angular returns a comment node type.

The relevant node that we want to use is the next() (its first sibling).

var tpl = '<div class="myWidget" ng-include="'templates/myWidget.html'"></div>;
var _myWidget = $compile(tpl)(scope);
var myWidget = null;

scope.$on('$includeContentLoaded', function () {
    myWidget = _myWidget.next();
});

answered Sep 16, 2014 at 16:46

Carlos León

92 bronze badges

Comments

Pedro · Accepted Answer · 2016-06-11 22:24:35Z

-1

You just needed to add the jquery to use ".html" and fixed the naming of ng-model

answered Jun 11, 2016 at 22:24

Pedro

1,4877 gold badges23 silver badges41 bronze badges

1 Comment

Kris van der Mast Over a year ago

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

Collectives™ on Stack Overflow

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

5 Answers 5

3 Comments

3 Comments

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

3 Comments

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related