Alter shared mdToolbar aus Sicht

Question

Ich habe ein SPA in Angular Material, die eine mdToolbar Element mit einem Hamburger Menü + links Sitenav anzeigt. Dieses Menü befindet sich im Moment in meiner index.html, wo ich auch ein <ui-view> Element eingerichtet habe, um die Ansicht zu rendern.

Jetzt habe ich eine Ansicht mit einem mdList drin. Wenn der Benutzer einige Elemente auswählt, möchte ich ein Löschsymbol in der Symbolleiste anzeigen. Dieses Löschsymbol sollte mit der Löschaktion meines Controllers verknüpft sein, die natürlich für die geladene Ansicht spezifisch ist, nicht für index.html.

Ich möchte wissen, was ein empfohlenes Muster dafür wäre. Ich kann mir einige Möglichkeiten vorstellen, aber die sind hässlich. Ich dachte in der Richtung, in der Symbolleiste einen Platzhalterbereich zu haben, den ich durch Inhalte aus meiner Sicht ersetzen kann, wo die Elementaktionen (ngClick) mit den Aktionen des View-Controllers verknüpft sind. Kennt jemand ein gutes Tutorial oder ein Codepen-ähnliches Beispiel, wie man das macht?

aktualisieren

ich jetzt umgesetzt haben etwas, dass ich mit glücklich bin, aber es ist durchaus noch nicht da. Was ich getan habe, ist eine menuService erstellen, die hinter meinem Menü in den Controller injiziert wird (es ist keine separate Ansicht, könnte sein, aber macht keinen Unterschied in diesem Szenario). Der Menücontroller bindet sich an diesen Dienst und andere Dienste können Inhalte darin einfügen. In meinem Testszenario injiziere ich einen String, der dann in der Toolbar angezeigt wird, alles ok.

Das einzige, was ich jetzt tun muss, ist anstelle einer Zeichenfolge, injizieren Sie eine Schaltfläche mit einem Event-Handler, der zurück zum Controller der Ansicht geht. Ich bin mir nicht ganz sicher, wie ich das noch machen soll.

Ein weiteres Update

Also habe ich diese Klasse:

export class CommandButton { 
    svgSrc: string; 
    click:() => void; 
} 

, die ich in meinen menuService injizieren kann und bindet dann an den Menü-Controller. Funktioniert gut für das Symbol (die Schaltfläche wird angezeigt), aber wie zu erwarten (ich tat), funktioniert die Klick-Funktion nicht. Ich habe dies im View-Controller wie folgt:

var deleteButton = new Services.CommandButton(); 
deleteButton.svgSrc = 'icons/ic_delete_24px.svg'; 
deleteButton.click = this.deleteLogs; 
this.menuService.setButtons([deleteButton]); 

Und der Code für this.deleteLogs ist einfach:

deleteLogs() { 
    console.log('deleting logs'); 
} 

-Code für die Schaltflächen:

<div ng-repeat="button in ctrl.buttons"> 
    <md-button ng-click="button.click"> 
     <md-icon md-svg-src="{{button.svgSrc}}" class="md-icon md-24"></md-icon> 
    </md-button> 
</div> 

Was ich erhofft Dies würde die deleteLogs-Methode im View-Controller auslösen, aber das ist nicht der Fall. Ich brauche Daten aus der Ansicht, da dort die Elemente ausgewählt sind. Soweit ich sehen kann, passiert einfach nichts, so dass die Bindung irgendwo fehlschlägt. Was wäre eine gute Möglichkeit, um sicherzustellen, dass das click -Ereignis für die View-Controller-Funktion verwendet wird? Ich könnte ein $ rootscope. $ Broadcast machen, aber das fühlt sich hacky an.

Letztes Update

Es macht nichts, ich meine eigenen Fehler gefunden.Die Bindung des Ereignisses falsch war, hätte sein sollen (die Klammer beachten):

<md-button ng-click="button.click()"> 

Answer 1

In der Zwischenzeit habe ich einen schönen Weg gefunden, dies zu tun. Der Post selbst enthält nun auch die Antwort.