CODEWITHSUNDEEP
javascriptangularjs
brazorf
brazorf

Reputation: 1951

AngularJS contenteditable compiling contents on change

I have a contenteditable input like so.

<div contenteditable input-container></div>

An external event may add html content into the contenteditable. It could be plain html text, or html with a directive. So for example i might end up with

<div contenteditable input-container>
    <some-directive></some-directive>
</div>

So, when the contenteditable content changes, i need to recompile. I'm doing that like so: 

module.directive('inputContainer', ['$compile', function($compile) {
    return {
        restrict: "A",
        link: function(scope, element) {
            element.on('change', function(){
                console.log("Compile main input content");
                $compile(element.html())(scope);
            });
        }
    };
}]);

Assuming the inner directive to be like this:

module.directive('someDirective', function() {
    return {
        restrict: "E",
        template: "<span>***test***</span>",
        replace: true,
        scope: {
            item: "="
        },
        link: function(scope, element) {
            console.log(element.html());
        }
    };
});

Problem is that everything seems to run fine, no errors and the console logs are where they're expected to be, but the page is not updated and it's not showing the expected

***test***

Am i doing something wrong?

Upvotes: 1

Views: 321

Answers (1)

brazorf
brazorf

Reputation: 1951

Ok got it, the error is here

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

$compile expects DOM elements, not html text. So the replacing with the follwing fixed

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

Upvotes: 1

Related Questions