Verwenden eines aktualisierten Arrays von Objekten innerhalb einer Direktive

Question

In einer Ansicht verwende ich ng-repeat innerhalb einer Direktive, um ein Array von Objekten von meinem Controller zu durchlaufen. Während dieser Phase erleiden die Objekte innerhalb des Arrays Wertänderungen. Wenn ich die Ansicht ändere und eine neue Instanz derselben Direktive erstelle, möchte ich das Array von Objekten noch einmal durchlaufen, aber diesmal über das aktualisierte Array von Objekten schleifen.

Wenn ich die Objekte in der ersten Ansicht modifiziere und das gleiche Array von Objekten in der zweiten Ansicht überlasse, verwendet die Direktive das ursprüngliche Array, nicht das aktualisierte Array. Ich habe versucht, das Array auf Änderungen zu beobachten, es sieht die Änderungen, aber während der zweiten Instanz der Direktive verwendet es das ursprüngliche Array.

Kann jemand erklären was los ist und wie kann ich das lösen?

Answer 1

Sie können eine einfache Parent-Child-Beziehungsdirektive haben, in der die Direktive Zugriff auf den Bereich des Controllers der Ansicht hat, in der sie hinzugefügt wird. so können Sie ng-repeat in Direktive & Array im Umfang Variable des Controllers haben. Dann werden die Werte automatisch durch eine Zwei-Wege-Datenbindung synchronisiert. Du kannst folgenden Plunks folgen, die ich erstellt habe.

Es hängt davon ab, wie Sie Daten zwischen Controller & Direktive teilen. Zwei Datenbindungen helfen dabei, es zu synchronisieren, sonst müssen Sie es über Ereignisse oder die Verwendung der $ watch in-Direktive (wenn Sie jquery code innerhalb der Direktive verwenden) verwenden.

https://plnkr.co/edit/m47TPgcX7lY8nL1LswCv?p=preview

app.directive('helloWorld', function ($compile, CarCompany) { 
    return { 
    restrict: 'E', 
    template: '<div>\ 
        <h2>HelloWorld directive</h2>\ 
        <p ng-repeat="car in carc">{{car.name}}</p>\ 
        <h3>Liste des marques:</h3>\ 
       </div>', 
    link: function (scope, elem, attrs) { 

     var ul = document.createElement('ul'); 
     var lis = ''; 
     angular.forEach(CarCompany, function(item) { 
     lis += '<li>' + item.name + '</li>'; 
     }); 
     ul.innerHTML = lis; 

     elem.append(ul); 

     $compile(ul)(scope); 
    }, 

    }; 
}); 

& Richtlinie Dies ist ganz einfach Richtlinie zeigt freigegebenen Bereich zwischen Controller. https://www.infragistics.com/community/blogs/dhananjay_kumar/archive/2015/06/11/understanding-scopes-in-angularjs-custom-directives.aspx