CODEWITHSUNDEEP
angularjsangular-ui-routermaterial-design
Venkat
Venkat

Reputation: 1145

$materialDialog fails to show when used with angular-ui-router

I have a sample plunker here

I have a login page and on a successful login, the user is redirected to the actual home page, which is similar to:

$state.go('home');

Now, after logging in, I have a button to show some dialog. Clicking the button fails to load the dialog. If the user refreshes the home page (post login) and then clicks on the button, the dialog opens successfully. I am not able to understand why this happens. Could this be due to a bug in angular-ui-router? Or am I missing something?

Upvotes: 0

Views: 400

Answers (1)

xenoterracide
xenoterracide

Reputation: 16837

I believe, you went about this wrong, when using ui router you should let it control your states. I'm not sure why your dialog fails to show, but I do notice you're using ng-click to open it. A better way would be to make a button with ui-sref which maps to a sub state.

<md-button ui-sref="characters.create" />

then in your state definition define an onEnter instead of a controller.

.state( 'characters.create', {
        url: '/create',
        templateUrl: 'character/create.html',
onEnter: function( $mdDialog, $log, $state ) {
            var ev = null; // this should be the $event
            $mdDialog.show(
                $mdDialog.alert()
                    .parent( angular.element( document.body ) )
                    .title( 'This is an alert title' )
                    .content( 'You can specify some description text in here.' )
                    .ariaLabel( 'Alert Dialog Demo' )
                    .ok( 'Got it!' )
                    .targetEvent( ev )
            ).then( function( answer ) {
                    $log.debug( 'answer', answer );
                    $state.go( 'characters' );
                }, function() {
                    $log.debug( 'cancelled dialog' );
                } )
        }

Upvotes: 1

Related Questions