如何在基於組件的架構中處理對話框

Question

我正在使用Angular 1.5中的應用程序。 我堅持基於組件的架構（https://docs.angularjs.org/guide/component） 和在那裏描述的輸入/輸出流程。

直到現在它工作得很好，但現在我需要打開一個子組件作爲對話窗口，我卡住了。

從主組件開始渲染組件樹時，體系結構很好。但我不知道如何讓其中一個孩子顯示爲對話框，並仍然使用推薦的輸入/輸出流程。

你知道任何模式/庫嗎？

Answer 1

圖書館將角材料：

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

模式必須是這樣的：

// 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 
}) 

至極，你會從這樣的父組件調用：

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

希望這有助於！