Wie Daten zwischen Richtlinie Controller und übergeordnetem Bereich synchronisiert haben

Question

Ich weiß, dass dies wahrscheinlich mehrmals beantwortet, und es könnte sogar in Angular Dokumentation darauf hingewiesen werden, aber ich kann mein Leben nicht verstehen, wie dies zu tun ' richtig'.

Ich habe eine Richtlinie, die Elemente in einer Tabelle mit benutzerdefinierten Objekte auflisten. Ich möchte, dass die Elemente zwischen der Direktive und dem Bereich, in dem sie sich befindet, synchronisiert werden (wenn zum Beispiel Elemente aus dem übergeordneten Bereich hinzugefügt oder entfernt werden, möchte ich, dass die Liste entsprechend aktualisiert wird. Dasselbe gilt umgekehrt in der Liste ausgewählt, mag ich die Eltern, dies wissen.) Am Ende, ich will es Speicher gemeinsam genutzt werden, so dass die Daten nur ‚funktioniert‘, ohne $ Uhr, $ & $ Versand gelten, wenn das möglich ist.

Ich dachte, ich es so machen könnte:

Richtlinie:

{ 
    restrict: 'E', 
    templateUrl: 'js/components/selectionList/component.selectionList.html', 
    controller: 'SelectionlistCtrl', 
    controllerAs: 'selecListCtrl', 
    scope: { 
    items: '=' 
    }, 
    link: (scope, element, attrs) => { 
    scope.selecListCtrl.items = scope.items; 
    } 
} 

HTML:

<selection-list items="vm.items" /> 

vm ist der Controller in der übergeordneten Rahmen und Elemente ist ein Array von Objekte. Das funktioniert, aber sobald ich die Ansicht verlasse, die die selection-list-Direktive enthält, werden die Listenelemente nicht erneut geladen, wenn ich die Ansicht erneut öffne (wahrscheinlich, weil die link (...) -Funktion nur einmal ausgeführt wird und Die Direktive wird dann zwischengespeichert).

kann ich sicherstellen, dass die Sicht und die Richtlinie nicht zwischengespeichert und dann funktioniert es. Aber es muss ein besserer Weg sein, dies zu tun? Oder habe ich kein Glück?

Answer 1

Eine Lösung, die nicht apply, watch nicht verwendet, ... ist in diesem Thread AngularJS: Parent scope is not updated in directive (with isolated scope) two way binding Es ist in der Antwort unter der akzeptierten Antwort, ich kopierte es hier

angular.module('app') 
.directive('navbar', function() { 
    return { 
     templateUrl: '../../views/navbar.html', 
     replace: 'true', 
     restrict: 'E', 
     scope: { 
      email: '=' 
     }, 
     link: function (scope, elem, attrs) { 
      scope.$on('userLoggedIn', function (event, args) { 
       scope.email = args.email; 
      }); 
      scope.$on('userLoggedOut', function (event) { 
       scope.email = false; 
       console.log(newValue); 

      }); 

     } 
    } 
}); 

und $rootScope.$broadcast('userLoggedIn', user); auf die Ereignisse in dem emittieren

Controller

weitere Informationen über .$emit und .$on ist in Working with $scope.$emit and $scope.$on

ist dies auch Interesse ing: vielleicht https://blog.umur.io/2013/07/02/angularjs-directives-using-isolated-scope-with-attributes/

$route.reload()

($route in die Steuerung injizieren)

auch

sehen How can I tell AngularJS to "refresh"