Menu
This may seem like a silly question but I need to know how to watch the entire DOM of a page and recompile it any time it changes. Essentially this is what AngularJS does by default by use of databindings, but I need this to happen anytime anything in the DOM is changed, not just bindings. The reason why is because I have an app that is built entirely in HTML, Javascript and PHP. It's a single page application, it has a main page and injects PHP into a DIV wrapper within that page.
I want to make some modifications to it but want to keep my code completely separate from the original code. To do this I need to be able to recompile the DOM anytime a new PHP file with it's own DOM structure is injected. What I have so far does not appear to be working.
app.directive("watch", function () {
return function (scope, element, attr) {
scope.$watch("watch", function(oldValue, newValue) {
if(newValue) {
console.log("there is a new value");
console.log("the new value is " + newValue);
}
});
}
});
I add the watch attribute the the <body> tag but it doesn't seem to work, when the dom is changed nothing gets logged. Ultimately I'd like to replace the console.log with $compile, but I first need to get the watch to work. Can someone point me to what I'm doing wrong?
486
So as I've stated in my comments above, it's a bad idea to do what you're trying to do. That said, if you still want to go this way, you can $watch just about anything by passing a function in as the first parameter.
The code below will check to see if the HTML inside the <body> tag has changed. Please note, that this is a HORRIBLE idea.
$scope.$watch(function () {
return document.body.innerHTML;
}, function(val) {
//TODO: write code here, slit wrists, etc. etc.
});
The watch above will fire anytime ANYTHING in the HTML changes.
Additional Info: As of right now, in a whole lot of browsers, there's not really a good way to monitor for new DOM elements which have been loaded. The best way is still to trigger something at the moment the new DOM elements were added.
183
As mentioned by Steinway Wu, MutationObserver is the way to go. Here is a snippet :
.directive('myDirective', function() {
return {
...
link: function(scope, element, attrs) {
var observer = new MutationObserver(function(mutations) {
// your code here ...
});
observer.observe(element[0], {
childList: true,
subtree: true
});
}
};
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
