Wie Dialoge in der eckigen komponentenbasierten Architektur behandelt werden

Question

Ich arbeite an einer Anwendung in Angular 1.5. Ich bleibe bei Component-basierte Architektur (https://docs.angularjs.org/guide/component) und Input/Output Flow dort beschrieben.

Bis jetzt funktionierte es gut, aber jetzt muss ich eine Kindkomponente als ein Dialogfenster öffnen und ich bleibe stecken.

Die Architektur ist in Ordnung, wenn Sie den Komponentenbaum ausgehend von der Hauptkomponente rendern. Aber ich habe keine Idee, wie man eines dieser Kinder bekommt und es als Dialog anzeigt, und trotzdem den empfohlenen Input/Output-Flow verwendet.

Kennen Sie ein Muster/eine Bibliothek?

Answer 1

würde die Bibliothek Winkel Material:

// 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 Sie von der übergeordneten Komponente wie dies würde aufrufen:

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

Das Muster, so etwas sein, hätte

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

Hoffe, das hilft!