vrghost vrghost - 1 month ago 6
AngularJS Question

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

Answer

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.