CODEWITHSUNDEEP
javascriptangularjsangular-ui-routerbroadcast
Avi
Avi

Reputation: 1964

angular controllers - two way broadcasting

I have a controller that wraps ui-router and control its flow (like menu bar). when a user press on a menu item, there is a function that changes the ui-router state and broadcast an event to the inner controllers. every inner controller inside this ui-router can listen and act to this event. the inner controllers are making validation on this event but if the validation fails I cannot undo the state change. Any idea how to solve this problem? Thanks

update: using the ui-router $stateChangeStart event is a good approach but still incomplete. now the problem is, my main controller that hosts the ui-router and the menu bar has a progress bar. The main controller is registered to $stateChangeStart and taking care of the progress bar, but the child view that is also register to the event is preventing default. which means the controllers are now in an inconsistent mode. the main controller has already took care of the progress bar and the view itself did not changed. Please advise

Upvotes: 0

Views: 80

Answers (2)

georgeawg
georgeawg

Reputation: 48968

The ui-router itself issues a $stateChangeStart event.

Your controllers can use event.preventDefault() to prevent the transition from happening. 

$scope.$on('$stateChangeStart',
    function(event, toState, toParams, fromState, fromParams){
        if (notOK ) {
            event.preventDefault();
        };
})

For more information see, UI-Router state.$state API Reference -- events - $stateChangeStart

Upvotes: 1

Charlie
Charlie

Reputation: 23798

Broadcast a cancellation event using $rootScope and catch the event inside your menu controller.

$rootScope.$broadcast('cancelStateChange');

Upvotes: 0

Related Questions