How to automatically load a second subview using ui-router and javascript?

Question

I have a SPA loading the following scheme of views:

Main Page > View > Subview > Sub-Subview.

The main page loads View with main navigation. The Subview shows the states containing a different list of items according to the chosen link in the main navigation.

Those items are links to explore details, which are showed in the Sub-subview, where I have 3 tabs. I'm trying to think about a solution to automatically load the first tab of details when a link is clicked on the Subview list. Also, the link in the Subview list is passing a parameter to grab an object in my database.

At first, what I was trying to do is to put the first tab in my HTML, so when a link is clicked it shows up, but it's not suitable and but I need to do it more dynamically, once I'm separating all the controllers. Here is my route config:

$stateProvider
        .state('main.application', {
            abstract: true,
            url: '/application',
            template: '<ui-view/>'
        })
        .state('main.application.index', {
            url: '',
            templateUrl: 'app/application/application.html',
            controller: 'ApplicationController as applicationCtrl',
            resolve: resolve.index
        })
        .state('main.application.settings', {
            url: '/settings/:id',
            templateUrl: 'app/application/settings/application.settings.html',
            controller: 'ApplicationSettingsController as appSettingsCtrl',
            resolve: resolve.settings
        })
        .state('main.application.settings.info', {
            url: '/info',
            templateUrl: 'app/application/settings/info/application.settings.info.html',
            controller: 'ApplicationSetInfoController as appInfoCtrl',
            resolve: resolve.settings
        })
        .state('main.application.settings.platforms', {
            url: '/platforms',
            templateUrl: 'app/application/settings/platforms/application.settings.platforms.html',
            controller: 'ApplicationSettingsController as appSettingsCtrl',
            resolve: resolve.settings
        })
        .state('main.application.settings.keys', {
            url: '/keys',
            templateUrl: 'app/application/settings/keys/application.settings.keys.html',
            controller: 'ApplicationSetKeysController as appKeysCtrl',
            resolve: resolve.settings
        });

score 0 · Answer 1 · answered Nov 09 '15 at 14:03

You can use ng-include for dynamic partials. Multiple views are problematic although are supported in ui-router - but not without issues.

Another option is to use ng-switch with custom directives if you have a finite list of known views to display. This is my preferred approach. Such as:

<div ng-switch="currentSelection">
  <div ng-switch-when="subPage1" subpage-one />
  <div ng-switch-when="subPage2" subpage-two />
</div>

That way if you want to automatically, initially display a certain page, you set $scope.currentSelection = 'subPage1'

How to automatically load a second subview using ui-router and javascript?

1 Answers1