Updating Angular Controller from vue component about ngvue

[dorayx]

Perhaps it is possible but I have not tested.

In an angular controller you can create a set callback to update data and then pass it to a vue component. In the vue component you will use the component hooks to call the received set callback from the angular controller with any component data.

[erickwilder]

The best approach I came up with to communicate from Vue components back to AngularJS without polluting Vue components and to keep AngularJS changes as minimal as possible was to adopt the event bus pattern.

// Inside AngularJS controller/component
import eventBus from './event-bus'

eventBus.$on('Component:changed', doSomething)

this was extremely helpful to trigger ui-router state transitions from Vue components:

import eventBus from './event-bus'
app.run(($state) => {
   eventBus.$on('ng:stateChange', (stateName, params, config) =>{
        $state.go(stateName, params, config)
  })
})

Everything you have to do is to import the event bus and start emitting events with it:

// Inside Vue component
import eventBus from './event-bus'

eventBus.$emit('ng:stateChange', 'app.stateName', {}, {inherit: false, reload: true}) 

[craig-doyle-uk]

Thanks for the comments @dorayx @erickwilder .
I resolved my particular use case in the following way :

In the Angular controller

$scope.showNotification = function (someArg) {
 doSomething
}

Angular view

<my-component  vprops-on-update="showNotification"></my-component>

Vue Template

<div change={this.onUpdate}> ... some content here </div>

Vue Component

@Component({
 props : {
  onUpdate: Function
 }
....
// controller updated by firing this.$props.onUpdate(someArg)