如何在 Angular 基于组件的架构中处理对话框

Question

我正在开发 Angular 1.5 中的应用程序。我坚持基于组件的架构 (https://docs.angularjs.org/guide/component) Input/Output 那里描述了流程。

到现在为止一切正常，但现在我需要打开一个子组件作为对话框 window 但我卡住了。

当您从主要组件开始渲染组件树时，架构很好。但我不知道如何获取其中一个子项并将其显示为对话框，并且仍然使用推荐的 Input/Output 流程。

你知道 pattern/library 这样做吗？

Answer 1

图书馆将是 angular material:

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: () => { .. }
}))

希望对您有所帮助！

如何在 Angular 基于组件的架构中处理对话框

How to handle dialogs in Angular component-based architecture

angularjs

angularjs-components