Jak obsługiwać okna dialogowe w architekturze opartej na komponentach kątowych

Question

Pracuję nad aplikacją w Angular 1.5. Pozostaję przy architekturze opartej na komponentach (https://docs.angularjs.org/guide/component) i opisanej tu przepływ Wejściowy/Wyjściowy.

Do tej pory działało dobrze, ale teraz muszę otworzyć element potomny jako okno dialogowe i utknąłem.

Architektura jest w porządku podczas renderowania komponentów drzewa w dół, zaczynając od głównego komponentu. Ale nie mam pojęcia, jak uzyskać jedno z tych dzieci i wyświetlić je jako okno dialogowe, i nadal używać zalecanego przepływu wejścia/wyjścia.

Czy znasz jakiś wzór/bibliotekę, aby to zrobić?

Answer 1

Biblioteka byłby materiał kątowa:

https://material.angularjs.org/latest/demo/dialog

Wzór musiałoby być coś takiego:

// my-dialog.js 
'use es6' 
export default locals => ({ 
    locals, // will be bound to the controller instance! 
    template: 
` 
<p>Something: <span>{{$ctrl.foo}}</span></p> 
<md-button ng-click="$ctrl.onSave()">Save</md-button> 
<md-button ng-click="$ctrl.cancel()">Cancel</md-button> 
` , 
    bindToController: true, 
    controllerAs: '$ctrl', 
    controller: function($mdDialog, myService) { 
    // this.foo = ..will be provided in locals as an input parameter.. 
    // this.onSave =() { ..will be provided as output parameter.. } 
    this.cancel =() => { 
     $mdDialog.cancel() 
    } 
    }, 
    clickOutsideToClose: true 
}) 

Wich byś powoływać od składnika dominującego takiego:

// main-component.js 
'use es6' 
import myDialog from './my-dialog' 
.. 
$mdDialog.show(myDialog({ 
    foo: 'bar', 
    onSave:() => { .. } 
})) 

Mam nadzieję, że to pomoże!