CODEWITHSUNDEEP
angularjsangular-ui-router
vrghost
vrghost

Reputation: 1212

Running ui.router in modal and ui-view

So not certain if this is possible with ui.router, but thought I would add a nice little modal that launches and says welcome to the site, give the user a chance to enter some details and so forth.

Setup is that the base view have two ui-views (mainview and menuview), and I added formview in the modal. I can get it to work so that when the modal opens it loads formview

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

        },
        //parent:"index"
    })

Didn't actually think it would work that easy, but it did, the problem is that as soon as it has loaded, it resets mainview and menuview (and as it is a modal, that means the background goes grey).

I tried to make form-welcome a child of index (the initial view), however, that breaks the whole thing. (index looks as follows)

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

        },

    })

I can reload all three views (mainview, menuview and formview), and other than a flickering screen its not to bad. But is there a way I can limit state, so that it only changes formview but leaves the other ones alone. Reason is that I want to change formview through five different screens, and hate flickering pages:)

It seems to me like it should be possible, but I may have missunderstood how it works

Upvotes: 3

Views: 1267

Answers (4)

Crhistian
Crhistian

Reputation: 1272

Why not try $uibModal, part of ui-bootstrap? https://angular-ui.github.io/bootstrap/

It sounds like its everything you need, It pretty much has its own state (includes its own view and controller) so piping data in is easy. You can even pass on data captured within the modal with a simple result.then(function(){} . We use it at work and it doesn't reload the state its on.

You'll probably just want to have it be a function that runs automatically in your controller. If you want to limit how often it pops up you can even have some logic for determining when it pops up in the resolve, pass it to your controller and open the modal based on the resolve.

Upvotes: 1

tu4n
tu4n

Reputation: 4430

UI-router is for changing the application state, not nesting views together. For that purpose you have angular#component. 

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

Then using ui-router, declare your index state, with its template as follow 

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

The power of ui-router is the ability to replace the ui-views by different template each different state

stateIndex: abstract
stateIndex.stateA: mainview: /home.html
stateIndex.stateB: mainview: /information.html

So ask yourself, will menuview gonna change to different templates in future states? If not, make it a component.

Upvotes: 2

Kliment
Kliment

Reputation: 2270

I think the best way to accomplish what you want is to listen on state changed event and fire the modal. The idea is you fire the welcome modal when the first view is opened and then you set variable in localStorage or some service (depends what you want to achive). Here is an example

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

Upvotes: 0

Ben Bracha
Ben Bracha

Reputation: 1397

I would try a different approach, and not having this "welcome" modal part of UI router. It doesn't sounds it should be a "state" in an app, where you can navigate to etc.

I would just pop up this welcome modal after your app finished to bootstrap (e.g. in your run() method or after w/e logic you have to start your app), based on your business logic (e.g. show it only one time).

Upvotes: 1

Related Questions