angularjs – 如何处理基于Angular组件的体系结构中的对话框

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

希望这可以帮助！