Geek Answers Handbook

How to look at the DOM for AngularJS changes

This may seem like a silly question, but I need to know how to view the entire DOM of the page and recompile it anytime. Essentially, this is what AngularJS does by default using data bindings, but I need this to happen at any time when something in the DOM has been changed, not just the bindings. The reason is because I have an application that is fully embedded in HTML, Javascript and PHP. This is a one-page application, it has a main page and embeds PHP in the DIV wrapper on this page.

I want to make some changes to it, but I want my code to be completely different from the source code. To do this, I need to be able to recompile the DOM at any time in a new PHP file into which the native DOM structure is entered. I still don’t work.

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 with the <body> , but it does not work when the dom changes, nothing is logged. Ultimately, I would like to replace console.log with $ compilation, but first I need to get the clock to work. Can someone tell me what I'm doing wrong?

+7
javascript dom angularjs
source share
4 answers

This is a bad idea, but I will humor you.

So, as I said in my comments above, it is a bad idea to do what you are trying to do. However, if you still want to go this route, you can $watch as you like by passing the function as the first parameter.

The code below will check if the HTML has changed inside the <body> . Please note that this is a AWESOME idea .

 $scope.$watch(function () { return document.body.innerHTML; }, function(val) { //TODO: write code here, slit wrists, etc. etc. });

The above clock will display ALL in NOTHING in HTML changes.

  • when the value changes at the input
  • when changing a selection in the drop-down menu
  • when an attribute changes in any html element.
  • and etc.

Additional Information: As of now, in many browsers, there really is no good way to keep track of newly uploaded DOM elements. The best way is to call something else when adding new DOM elements.

+31
source share

As Steinway Wu mentioned, 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 }); } }; });
+7
source share

As mentioned here (Mutation Events) , you can add listeners for DOM mutation events, such as DOMSubtreeModified .

eg. element.addEventListener("DOMSubtreeModified", function (ev) {...}, false)

Update

And in fact, they recommend using the Mutation Observer instead.

0
source share

I know this is an old topic, but I had a similar problem when trying to detect changes in the contents of an element filled with HTML code dynamically from a model using ng-bind-html .

How to associate some user data with the children of your ng-bind-html element using jqLite data() to determine if the content has been replaced (and therefore the user data has been lost) ?.

This would be directive code to view changes to an element populated with ng-bind-html :

 .directive("myOnDomContentChanges", function($window) { var DATA_KEY_NAME = "myOnDomContentChangesKey"; return function(scope, element, attrs){ scope.$watch(function(){ var res = null; var children = element.children(); if(children && children.length > 0){ var childData = children.data(DATA_KEY_NAME); res = (typeof childData !== "undefined" ? childData : false ); } return res; }, function(watchData){ if(watchData === false){ //Only run when false var children = element.children(); if(children && children.length > 0){ children.data(DATA_KEY_NAME, true); //Set custom data to true } //New HTML binding detected //Write your code here } }); }; })

Hope this helps. Comments are welcome. Rafa

0
source share

More articles:


All Articles