AngularJS:Die Kommunikation zwischen der Anweisung und dem Controller mit „scope.apply“ funktioniert nicht

Question

Ich habe einen MainController und eine verschachtelte Direktive.Ich schaue auf dieses Beispiel um zu sehen, wie die Kommunikation zwischen Controllern und Direktive funktioniert, aber meine scheint nicht zu funktionieren.

Grundsätzlich möchte ich eine Hauptcontroller-Bereichsfunktion aus einer benutzerdefinierten Direktive aufrufen (Schaltfläche „Warenkorb leeren“).Sehen Sie sich das Plunkr-Beispiel unten an.

Plukr: http://plnkr.co/edit/82STLkKxBK6htTnmnqlu?p=preview

Immer wenn ich console.log(scope.$apply("emptyCart()") ausführe, ist es aus irgendeinem Grund undefiniert.

Notiz:Ich versuche, $rootScope.broadcast so weit wie möglich zu vermeiden ...

Answer 1

Sie verwenden den isolierten Bereich für die übergeordnete Anweisung, sodass die untergeordnete Anweisung keinen Zugriff auf den Bereich des Controllers hat.

Um der untergeordneten Direktive Zugriff auf diese Bereichsfunktion zu gewähren und gleichzeitig die Isolation des übergeordneten Elements aufrechtzuerhalten, können Sie diese Funktion als hinzufügen scope: { ... } Eigenschaft auf der übergeordneten Direktive:

scope: {
  ...
  emptyCart: '='
}

und setzen Sie den Funktionsnamen auf das entsprechende Attribut in der Ansichtsdeklaration der übergeordneten Direktive:

<div ... data-show="showPopup" empty-cart="emptyCart"></div>

Dann können Sie alle Problemumgehungen überspringen, die Sie in Ihrem Plunker versucht haben, und einfach eine festlegen ng-click auf der untergeordneten Direktive, um die Controller-Funktion auszulösen:

sHTML = "<button ... ng-click='emptyCart()'>Empty cart</button>";

Demo