Beobachten Sie ein DOM-Objekt des Bereichs in Link-Methode der Richtlinie

Question

Wie kann ich eine Überwachung auf Umfang Variable, die ein Objekt und Objekt haben eine Eigenschaft, die HTML-Layout mit Inhalt editierbare div haben. Wenn ich contenteditable Div eintippe, gibt es ein aktualisiertes Layout zurück.

Hier ist mein Umfang Variable, die zwei Wege aus der Richtlinie binded sind ->

this.scope = { 
    section : '=' 
}; 

Und dieser Abschnitt hat Objekt wie:

this.sections = [ 
    { 
    'title' : 'Untitle Section New', 
    'type' : 'customSection', 
    'layout': '<div class="content-editable" contenteditable="true" style="width: 100%;height: 100%;-webkit-column-gap: 20px;-webkit-column-count:2;-webkit-column-rule: 1px solid red;background-color: #eeeeee;outline: none; position: relative; "><p>This is test.</p></div>' 
    } 
] 

Und hier ist html, wo ich diese Abschnitte in der Richtlinie wiederholen :

<book-section data-ng-repeat="section in book.sections" 
     section="section" 
     data-ng-show="digitalBook.activeSection === section.index"> 
</book-section> 

Jetzt möchte ich eine Uhr auf jeden Abschnitt anwenden. Wenn der editierbare Div-Inhalt aktualisiert wird, möchte ich einen aktualisierten HTML-Code von dom erhalten. Was ist der perfekte Weg, um dies mit einer guten Leistung durchzuführen?

Answer 1

$scope.$watch('scope variable', function() { 
    // do something here 
}, true); 

Siehe http://docs.angularjs.org/api/ng. $ RootScope.Scope # $ beobachten

die third argument as true Pass auf alle Eigenschaften zu beobachten. Ja, es hat Performance-Bedenken, aber Ihr Fall ist eine tiefe Uhr.

Sie können $watchCollection verwenden, dies wird nur die erste Ebene Ihrer array oder object überwachen.

scope.$watchCollection('scope variable', function (newVal, oldVal) {//do something here}); 

See https://docs.angularjs.org/api/ng/type/ $ rootScope.Scope # $ watchCollection