Запуск ui.router в модальном и ui-виде

Question

Так что не уверен, что это возможно с помощью ui.router, но я подумал, что добавлю хороший маленький модальный, который запустится и будет приветствовать на сайте, дать пользователю возможность войти некоторые детали и т. д.

Настройка состоит в том, что базовый вид имеет два ui-представления (mainview и menuview), и я добавил formview в модальном режиме. Я могу заставить его работать так, что, когда модальный открывает он загружает FormView

 .state('form-welcome', { 
     views: { 
      formview: 
       { 
        templateUrl: "/modals/form-welcome", 
       }, 

     }, 
     //parent:"index" 
    }) 

ли на самом деле не думаю, что это будет работать так легко, но это действительно, проблема в том, что как только он загружен, он сбрасывает mainview и menuview (и поскольку это модальный, это означает, что фон становится серым).

Я попытался сделать форму-приветствую ребенка индекса (начальный вид), однако, что разрушает все это. (Индекс выглядит следующим образом)

.state('index', { 
     url:"/int/index", 
     views: { 
      mainview: { 
       templateUrl: "/pages/index", 
       controller: "sketchMagController" 
      }, 
      menuview: {templateUrl: "/pages/top-menu"}, 

     }, 

    }) 

Я могу перезагрузить все три вида (MainView, menuview и FormView), а кроме мерцающего экрана его не плохо. Но есть ли способ ограничить состояние, так что он меняет форму, но оставляет только одни. Причина в том, что я хочу изменить FormView через пять различных экранов, и ненавидь мерцающий страницы :)

Мне кажется, что это должно быть возможно, но я, возможно, missunderstood, как это работает

Answer 1

UI-router предназначен для изменения состояния приложения, а не для разметки представлений. Для этого у вас есть угловой элемент #.

var app = angular.module('app', []); 
app.component('myModal', { 
    template: '<div ng-show="isShowing">Hello User</div>', 
    controller: 'modalCtrl' 
}); 

app.controller('modalCtrl', ['$scope', 'modalService', function($scope, modalService) { 
    //Save showing state in a service (default to false) so you don't popup your modal everytime user visit homepage 
    $scope.isShowing = modalService.getShowStatus(); 
    $scope.pressButton = function() { 
     $scope.isShowing = false; 
     modalService.setShowStatus(false); 
    } 
}); 

Затем, используя UI-маршрутизатор, объявить состояние индекса, с шаблоном, как следовать

<-- INDEX.HTML --> 
<my-modal></my-modal> 
<div ui-view='mainview'></div> 
<div ui-view='menuview'></div> 

Сила Ui-маршрутизатора является возможность замены UI-взгляды от другого шаблона каждая другое состояние

stateIndex: абстрактные
stateIndex.stateA: MainView: /home.html
stateIndex.stateB: MainView: /information.html

Так спросите себя, будет menuview собираюсь изменения различных шаблонов в будущих штатах? Если нет, сделайте его компонентом.

Answer 2

Я бы попробовать другой подход и отсутствие этой «приветствующей» модальной части маршрутизатора пользовательского интерфейса. Не кажется, что это должно быть «состояние» в приложении, в котором вы можете перемещаться и т. Д.

Я бы просто открыл этот приветственный мод после завершения вашего приложения для начальной загрузки (например, в методе run() или после логики w/e вам нужно запустить приложение), основываясь на вашей бизнес-логике (например, покажите ее только один раз).

Answer 3

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

$rootScope.$on(['$stateChangeSuccess', function(){ 
    var welcomeModalFired = localStorage.get('welcomeModalFired'); 
    if(!welcomeModalFired) { 
     //fire modal 
     localStorage.set('welcomeModalFired', true); 
    } 
}) 

Answer 4

Почему бы не попробовать $ uibModal, часть ui-bootstrap?https://angular-ui.github.io/bootstrap/

Это похоже на все, что вам нужно. Оно в значительной степени имеет свое собственное состояние (включает в себя собственный вид и контроллер), поэтому данные о трубопроводах легко. Вы можете даже передавать данные, записанные в модальном, с помощью простого результата. Then (function() {}. Мы используем его при работе и не перезаряжаем его состояние.

Возможно, вы просто захотите будь то функция, которая автоматически запускается в вашем контроллере. Если вы хотите ограничить, как часто она появляется, вы можете даже иметь некоторую логику для определения, когда она всплывает в решении, передать ее вашему контроллеру и открыть модальную систему на основе