Loading an Angular State on selection of each Tab from Bootstrap

Question

I have a module with multiple states which look like below:

(function() {

'use strict';

var maintenancePortabilityModule = angular.module('maintenance.portability.module',['ui-router']);

maintenancePortabilityModule.config([
    '$stateProvider',
    function ($stateProvider) {
        $stateProvider

           .state('app.maintenance.portability',
            {
                abstract: true,
                url: '/portability',
                template: '<ui-view/>'
            })

             .state('app.maintenance.portability.landing',
            {
                url: '/landing',
                templateUrl: '/app/maintenance/portability/maintenance.portability.landing.view.html',
                controller: 'portabilityImportController'
            })

            .state('app.maintenance.portability.import',
            {               
                url:'/import',
                templateUrl: '/app/maintenance/portability/maintenance.portability.import.view.html',
                controller: 'portabilityImportController'
            })
    }
]);


maintenancePortabilityModule.controller('portabilityImportController',
['$scope', 
    function ($scope) {
        $scope.Message = 'Hello welcome to import page';
    }
]);

})();

Now, I have some UI code on landing page where I want do load a state on each tab

2>Data Package Management</h2>

<div class="row push-down-md">
    <div class="col-md-12">
        <tabset>
            <tab heading="Create">
                <div>
                    Create Package
                </div>
            </tab>
            <tab heading="Import"  >
                Import view should load here</div>
            </tab>
        </tabset>
    </div>
    </div>

I have tried using multiple tricks from

>   <div ng-view="app.maintenance.portability.import"></div>

to

<tab heading="Import" ng-view="app.maintenance.portability.import" >

but nothing seems to render the view. Can anyone please help on what should I be missing here?

score 0 · Answer 1 · edited May 23 '17 at 10:29

0

Where is the dependency for your ui-router. Modify as below

var maintenancePortabilityModule = angular.module('maintenance.portability.module',['ui-router']);

Guess this works.

Update:

Displaying state as per tab selection can be done with help of Angular UI Bootstrap . Also have a look at this post which explains implementing it with ui router.

edited May 23 '17 at 10:29

Community

1
1

answered Nov 02 '16 at 22:50

Aravind

40,391
16
91
110

Routing module works on this page because it has been ['ui-router '] is inherited from other module. Also, I checked that if I add 'Hello' in the same div then the link successfully points browse to the View but I do not want to browse to the view. I want to load the view inside the tab div area – Lost Nov 02 '16 at 22:54
If the routing is inherited in another module that module should be injected as a dependency to this module. – Aravind Nov 02 '16 at 23:01
ok for simplicity I directly added [ui-router]. As I said routing works. However, I do not want to browse to the view instead I want to load the view on tab selection. how can I make this happen? – Lost Nov 02 '16 at 23:06

score 0 · Answer 2 · answered Jan 16 '17 at 19:05

0

I simply used ng-include for whatever view I wanted to use on each tab. It seems to be working fine

answered Jan 16 '17 at 19:05

Lost

12,007
32
121
193

Loading an Angular State on selection of each Tab from Bootstrap

2 Answers2

Update: