current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 2 down vote favorite

I'm working on an application in Angular 1.5. I stick to Component-based architecture (https://docs.angularjs.org/guide/component) and Input/Output flow described there.

Until now it worked fine, but now i need to open a child component as a dialog window and I'm stuck.

The architecture is fine when you render components tree down starting from main component. But i don't have an idea how get one of those children and display it as a dialog, and still use recommended Input/Output flow.

Do You know any pattern/library to do so?

share|improve this question
up vote 1 down vote accepted

The library would be angular material:

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

The pattern would have to be something like this:

// 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 you would invoke from the parent component like this:

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

Hope this helps!

share|improve this answer
    
looks nice, but what about binding data from main component to the dialog? – Jakub Filipczyk Mar 6 at 16:43
    
Good point @JakubFilipczyk, a good trick is to turn the dialog into a factory and using the "locals" property to set parameters passed to by the main component (see modified example) cheers! – coderlavalle Mar 10 at 0:49

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.