Forum Discussion

shhouji's avatar
shhouji
Mentor
8 years ago

How to recompile angular js after altering the page DOM

Our community is enabled with media 4 to use the document viewer (image viewer) functionality.

We have a requirement where we need to insert specific tags to the message body when it is displaying on the Forum Topic Page.
For that in Jquery, we are pulling message body by using class "lia-message-body-content" and adding new tags, then keeping the modified back to its place by using innerHTML.

The problem is when we update the body from jQuery, Lithium Image viewer functionality is not working.
To make Lithium image viewer work we are compiling the body to link scope and template together.
Code we are using for compilation:
var cThread = document.querySelector(".lia-message-body-content");
angular.element(cThread).injector().invoke(function($compile) {
var scope = angular.element(cThread).scope();
$compile(cThread)(scope);
});
Strangely this was stopped working recently. The scope variable is returning as undefined.
Not sure what exactly changed in Lithium structure. Now we are unable to find the scope.

Any ideas how to solve this issue?

  • VikasB's avatar
    VikasB
    Boss
    8 years ago

    Hi shhouji  I do not think so there is any issue with scope function. Make sure your querySelector working fine and getting the required value in cThread.  
    In case your querySelector working fine then can you please check what is says with unique element id which exist on your page as for example I am using "test" below.

    var scope = angular.element(document.getElementById("test")).scope();
console.log(scope);