Custom AngularJS directive, updating the data with $compile

Question

I'm trying to write a test directive that just shows some markup on the web page. For some reason, when I try to update the markup using AngularJS's angular.element() function, it only shows a visual representation of the object. Much like viewing a JavaScript object from the browser.

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

This is my template page where I am just spitting out the directive, it's too simple.

<div my-sample></div>

My directive looks like this,

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

What am I doing wrong?

the code seems correct JSFiddle

Naren Murali
– Naren Murali

2017-08-28 16:01:00 +00:00
Commented Aug 28, 2017 at 16:01 — Naren Murali
– Naren Murali, Commented Aug 28, 2017 at 16:01
Hence my confusion.

Jimenemex
– Jimenemex

2017-08-28 16:45:11 +00:00
Commented Aug 28, 2017 at 16:45 — Jimenemex
– Jimenemex, Commented Aug 28, 2017 at 16:45

JC Ford · Accepted Answer · 2017-08-28 16:03:43Z

1

$compile returns DOM elements, not HTML. Try just element.empty().append($compile(markup)(scope)) instead of using the .html() function.

answered Aug 28, 2017 at 16:03

JC Ford

7,0963 gold badges27 silver badges36 bronze badges

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

Collectives™ on Stack Overflow

Custom AngularJS directive, updating the data with $compile

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related