dwmkerr / angular-modal-service

Modal service for AngularJS - supports creating popups and modals via a service.
MIT License
626 stars 321 forks source link

Component bindings are bound too late #270

Open nsgundy opened 5 years ago

nsgundy commented 5 years ago

When I pass a component with bindings to the ModalService.showModal() function, I would expect to have the passed values available in the $onInit() lifecycle-hook of that component (that's when all the bindings are supposed to have been initialized). However, that is currently not the case and one can observe the value only being set later. A workaround is to use the $onChanges() lifecylce-hook of the component, but that's not always convenient.

// test.component.js
export const TestComponent = {
  template: `<tabs initial-tab="$ctrl.test">...</tabs>`
  controller: function() {
    $onInit() {
      console.log(`test=${this.test}`)
    },
  }
  bindings: {
    test: '<',
    close: '<'
  }
}

// somewhere in the application
ModalService.showModal({
  component: 'testComponent',
  bindings: {
    test: 'this is a test'
  }
})

Other observations:

@DougKeller Any ideas on how to address these issues?

nsgundy commented 5 years ago

Right, the issue for the bindings being bound too late is that they are only put on the scope once the controller is being run. If the bindings are placed on the injected scope directly, then the issue vanishes and $onInit() inside the component has access to the bindings.

dwmkerr commented 5 years ago

Anyone able to make a quick PR w/ tests to show the correct behaviour?

DougKeller commented 4 years ago

Apologies, I didn't notice this issue when it was first brought up. Funny enough we ran into this ourselves internally, so I just pushed #280 to address the $onInit issue.

The attribute and output bindings issues you brought up are trickier issues, so I didn't address those here. It's not ideal, but like you noticed using a one-way input binding for these instead works.

I've added a note to the readme to reflect this.