$ materialDialog не показывает при использовании угловых Ui-маршрутизатор

Question

У меня есть образец plunker here

У меня есть страница входа и успешного входа в систему, пользователь перенаправляется к фактической домашней страницы, которая аналогична до:

$state.go('home'); 

Теперь, после входа в систему, у меня есть кнопка для отображения некоторого диалога. Нажатие кнопки не позволяет загрузить диалог. Если пользователь обновляет домашнюю страницу (после входа в систему), а затем нажимает кнопку, диалог открывается успешно. Я не могу понять, почему это происходит. Может ли это быть связано с ошибкой в ​​угловом ui-router? Или я чего-то не хватает?

Answer 1

Я верю, что вы пошли об этом неправильно, при использовании ui router вы должны позволить ему контролировать свои состояния. Я не уверен, почему ваш диалог не отображается, но я замечаю, что вы используете ng-click, чтобы открыть его. Лучшим способом было бы сделать кнопку с ui-sref, которая будет отображаться в под-состоянии.

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

то в вашем определении состояния определяют onEnter вместо контроллера.

.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'); 
       }) 
     }