Wie sehen Sie den DOM für änderungen AngularJS

Dies mag wie eine dumme Frage, aber ich muss wissen, wie zu beobachten, die gesamte DOM einer Seite und kompilieren Sie es jedes mal verpasst. Das ist im wesentlichen, was AngularJS standardmäßig tut, die durch die Nutzung des databindings, aber ich muss das geschehen jederzeit alles im DOM wird geändert, nicht nur Bindungen. Der Grund warum ist, weil ich eine app, die ist komplett in HTML, Javascript und PHP. Es ist ein single-page-Anwendung, hat es eine Hauptseite und spritzt PHP in einen DIV-wrapper in die Seite.

Möchte ich einige änderungen vornehmen, um es, wollen aber die halten meinen code komplett getrennt von den original-code. Um dies zu tun muss ich in der Lage sein zu kompilieren, die DOM jederzeit eine neue PHP-Datei mit seinen eigenen DOM-Struktur injiziert wird. Was ich bisher nicht zu sein scheinen zu arbeiten.

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);
             }
         });
     }
});

Füge ich die-Uhr-Attribut, das die <body> - tag, aber es scheint nicht zu funktionieren, wenn das dom verändert wird nichts protokolliert. Eigentlich würde ich gern ersetzen Sie die Konsole.Protokoll mit $kompilieren, aber ich muss zuerst, um die Uhr zu arbeiten. Kann mir jemand zeigen was ich falsch mache?

Dies alles scheint wie ein sehr schlechtes design. Warum nicht Eckig laden Sie die PHP und steckte es in das div mit der ng-inlude oder routing?
Ich wusste nicht, bauen Sie die ursprüngliche Anwendung hatte ich auch so gemacht, das ist, wie ich es getan hätte. Wie es ist, ich versuche nur, um einige änderungen vorzunehmen, was schon da ist.
Sicherlich könnte man hinzufügen, eine ng-app="myModule" der <html> - Tags in die original-app?

InformationsquelleAutor richbai90 | 2013-10-10

31

, Dass es eine schlechte Idee, aber ich werde humor.

So, wie ich erklärt habe, in meine Kommentare oben, dass es eine schlechte Idee das zu tun, was Sie zu tun versuchen. Das sagte, wenn Sie wollen immer noch diesen Weg gehen, können Sie $watch nur über etwas, indem man eine Funktion als ersten parameter.

Den code unten überprüfen, um zu sehen, ob der HTML-in die <body> tag geändert hat. Bitte beachten Sie, dass dies ist eine SCHRECKLICHE Idee.
```
$scope.$watch(function () {
   return document.body.innerHTML;
}, function(val) {
   //TODO: write code here, slit wrists, etc. etc.
});
```
Die Uhr oben wird das Feuer jederzeit ALLES in den HTML-änderungen.
- wenn ein Wert geändert wird in ein input -
- wenn sich die Auswahl ändert, die auf einem dropdown -
- wenn eine änderungen der attribute in einem element in der html.
- etc.
Zusätzliche Info: Wie der jetzt in eine ganze Reihe von Browsern, es ist nicht wirklich ein guter Weg, um zu überwachen, für die neue DOM-Elemente, die geladen wurden. Der beste Weg ist immer noch auszulösen in dem moment etwas die neue DOM-Elemente Hinzugefügt wurden.
- Deckt Augen, aber ja, es wird funktionieren 😐 +1
- Ich Schätze Sie humoring mich, ich will zu tun das der richtige Weg ist. Ich könnte mit ng-include portal.php zum Beispiel, das problem ist, ich weiß nicht, wie ich alles richtig mache ohne ohne umschreiben der ganzen Sache. Die Anwendung, die ich bin den Umgang mit einem cluster und ich weiß wirklich nicht, einen besseren Weg zu gehen.
- Ich denke, wenn ich wusste, dass Sie mehr Einzelheiten, warum Sie musste das tun, ich könnte Ihnen eine weniger snarky Antwort. haha.
- As of right now, in almost all browsers, there's not really a good way to monitor for new DOM elements which have been loaded. - was MutationObserver? Andere als IE, es hat ziemlich gute Unterstützung
- Naja im Grunde haben Sie gebaut, Hunderte von Seiten mit PHP-code, verwendet für den alleinigen Zweck der schreiben von html und javascript. Es gibt keine Trennung von code, es ist nicht erholsam, es gibt also keine Anfragen, grundsätzlich sind die Tasten Feuer javascript-Funktionen, die php-Klassen, die den Wiederaufbau der dom.
- funktioniert nicht in Android Mobile, Opera Mini (wen interessiert das? lol) oder einer beliebigen version von IE weniger als 11. (das ist eine große Scheibe von Browsern) ich denke, "fast alle" war übertrieben wird.
- Ich kann sehen, wie dies wäre eine schreckliche Idee. Ich muss einen anderen Weg finden.
- Das ist schön für last resort-debugging.
InformationsquelleAutor Ben Lesh

Erwähnt Steinway Wu, MutationObserver ist der Weg zu gehen. Hier ist ein 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
            });
        }
    };
});

InformationsquelleAutor aaaaahaaaaa

Habe ich ein kleines utility service

hier ist der code

in GenericService.js wir haben diese

angular.module('GenericServiceModule', [])
    .factory('$utilsService', function () {

        var utilService = {};

        utilService.observeDomChange = function (domElement, doThisOnChange, observationOptions) {
            var defaultOptions = {
                //attributes: true, //attribute changes will be observed | on add/remove/change attributes
                //attributeOldValue: true, //will show oldValue of attribute | on add/remove/change attributes | default: null
                //we need this because in .find() sizzle modifies id temporarily, https://github.com/jquery/jquery/issues/2620
                //attributeFilter: ['style'], //filter for attributes | array of attributes that should be observed, in this case only style

                //characterData: true, //data changes will be observed | on add/remove/change characterData
                //characterDataOldValue: true, //will show OldValue of characterData | on add/remove/change characterData | default: null

                childList: true, //target childs will be observed | on add/remove
                subtree: true //target childs will be observed | on attributes/characterData changes if they observed on target

            };
            var options = observationOptions || defaultOptions;

            var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
            var observer = new MutationObserver(function anElementIWatchChanged(mutations) {
                doThisOnChange();
            });

            //removing the dom element won't be triggered
            observer.observe(domElement, options);
        };

        return utilService;
    });

einfach und Sie können es verwenden, wie

$utilsService.observeDomChange($element[0], doSomething());

hier ist ein Beispiel für eine Verwendung

angular.module(
...
.directive('myCustomDirective', function ($utilsService) {
    return {
        restrict: 'A',
        //...
        controller: function ($scope, $element) {
            //...
            $scope.$on('$viewContentLoaded', function (event, viewName) {
                $utilsService.observeDomChange($element[0], doSomething());
            }
        }
    }
}

InformationsquelleAutor Basheer AL-MOMANI

0

Wie bereits erwähnt hier (Mutation Events), können Sie hinzufügen von Listenern für das DOM-mutation-events wie DOMSubtreeModified.

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

Update

Und tatsächlich, Sie empfehlen die Verwendung Mutation Observer statt.

InformationsquelleAutor Steinway Wu

Ich weiß, das ist ein altes Thema, aber ich habe ein ähnliches problem erlebt, wenn Sie versuchen zu erkennen, änderungen in den Inhalt eines Elements, gefüllt mit HTML-code dynamisch aus dem Modell mit ng-bind-html.

Was assoziieren einige benutzerdefinierte Daten zu den Kindern Ihrer ng-bind-html element mit jqLite ist data() zu erkennen, ob der Inhalt ersetzt wurde (und daher die benutzerdefinierten Daten verloren)?.

Dies wäre der code einer directive zu beobachten, die änderungen an einem element gefüllt mit 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
            }
        });
    };
})

Ich hoffe, es hilft.

Kommentare sind willkommen.

Rafa

InformationsquelleAutor rbarriuso

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

, Dass es eine schlechte Idee, aber ich werde humor.