Angular Js / ui- router / Tabs setup, Controller being called twice

Question

I am using ui-router and have 2 tabs under a page which can be navigated via navigation bar (Home || Logs || Quick Info).

On clicking Logs, I have 2 tabs (Tab1 and Tab2). I have separate controllers for each tab and a main controller for a Log Page.

On clicking the Log Page MainCtrl gets executed once. Tab1 gets activated and the Tab1Ctrl gets executed twice..the same with Tab2.

Here is the code: Route.js

   'use strict';
/**
 * Routing for Scheduler PreProcessor Application
 */
schedulerPreProcessor.config(function($stateProvider, $urlRouterProvider) {

    $stateProvider

    .state('home', {
        url : '/home',
        templateUrl : 'schedulerPreProcessor/models/scheduler/home.html',
        controller : 'mainController'
    })

    .state('logs', {
        url : '/logs',
        templateUrl : 'schedulerPreProcessor/models/logs/logs.html',
        controller : 'logsController',
        resolve : {
            'currentLogData' : function($stateParams, SchedulerHTTPService) {
                return SchedulerHTTPService.getCurrentLogLevel();
            }
        }
    })

    .state('logs.logInfo', {
        url : 'logs/logInfo',
        templateUrl : 'schedulerPreProcessor/models/logs/logInfo/logInfo.html',
        controller : 'logInfoController'
    })

    .state('logs.appProperties', {
        url : 'logs/appProperties',
        templateUrl : 'schedulerPreProcessor/models/logs/appProperties/appProperties.html',
        controller : 'appPropertiesController'
    })

    .state('info', {
        url : '/info',
        templateUrl : 'schedulerPreProcessor/models/quick_info/info.html',
        controller : 'quickInfoController'
    });

    $urlRouterProvider.otherwise('/home');

});

logs.html

<div ng-init="onLoad();">
<tabset> 
        <tab ng-repeat="tab in tabs" select="go(tab.route)"
            ui-sref-active="tab.active" heading="{{tab.title}}"
            active="tab.active" disable="tab.disabled"> 
            <ui-view></ui-view>
        </tab>
    </tabset>
</div>

Logs controller

'use strict';
schedulerPreProcessor.controller('logsController', function($scope, $filter,
        $http, $state, $stateParams, $rootScope, $location,
        SchedulerHTTPService, referenceDataService, currentLogData) {

    /**
     * Navigation of Tabs.
     */
    $scope.go = function(route) {
        $state.go(route);
    };

    $scope.name="Hello";

    $scope.onLoad = function(){
        /**
         * tabs
         */
        $scope.tabs = [ {
            title : 'Log Info',
            route : 'logs.logInfo'
        }, {
            title : 'Application Properties',
            route : 'logs.appProperties'
        } ];

        /**
         * logs
         */
        $scope.logs = [ {
            key : 'log01',
            value : 'root',
            name : 'Application Log',
            isChecked : false
        }, {
            key : 'log02',
            value : 'org.hibernate',
            name : 'Hibernate Log',
            isChecked : false
        }, {
            key : 'log03',
            value : 'org.springframework',
            name : 'Spring Log',
            isChecked : false
        } ];

        /**
         * dataLogList
         */
        $scope.dataLogList = [ {
            key : 'log01',
            value : 'appLog',
            name : 'Application Log'
        }, {
            key : 'log02',
            value : 'hibLog',
            name : 'Hibernate Log'
        }, {
            key : 'log03',
            value : 'springLog',
            name : 'Spring Log'
        }, {
            key : 'log04',
            value : 'perfLog',
            name : 'Performance Log'
        } ];

        $scope.logTypeList = [];

        if ($scope.logTypeList.length == 0 && referenceDataService != null
                && referenceDataService.loadRefData() != null) {
            $scope.logTypeList = referenceDataService.loadRefData().logRefData;
        }

        $scope.effectiveLogLevel = null;
        $scope.isHideCurrentLogLevelSection = true;

        if (currentLogData != null && currentLogData.currentLogLevel != null) {
            $scope.isHideCurrentLogLevelSection = false;
            $scope.effectiveLogLevel = currentLogData.currentLogLevel;
        }

        $scope.sectionTitle = null;
        $scope.hideLogSection = true;

        $scope.HTTPRequestMessage = {};
        $scope.HTTPResponseMessage = {};

        $scope.isDisableLogApplyButton = true;
        $scope.isDisableLogResetButton = true;
    };


});

LogInfoController.js

'use strict';
schedulerPreProcessor.controller('logInfoController', function($scope, $filter,
        $http, $state, $stateParams, $rootScope, $location,
        SchedulerHTTPService, referenceDataService, currentLogData) {
$scope.name="Hello";
});

appPropertiesController.js

'use strict';
schedulerPreProcessor.controller('appPropertiesController', function($scope, $filter,
        $http, $state, $stateParams, $rootScope, $location,
        SchedulerHTTPService, referenceDataService, currentLogData) {
$scope.lastName="XXXXXXXXX";
});

The other 2 controllers are plain and simple...just div tags and plain functions in controllers for populating DOM elements.

Any Help would be great.

Trying to figure out what is wrong in having separate controllers for separate tabs.

Thanks in advance.

Could you add states for this state & also views html?

Pankaj Parkar
– Pankaj Parkar

2015-12-16 20:17:28 +00:00
Commented Dec 16, 2015 at 20:17 — Pankaj Parkar
– Pankaj Parkar, Commented Dec 16, 2015 at 20:17
@PankajParkar Added the states and views

MBK
– MBK

2015-12-16 21:01:30 +00:00
Commented Dec 16, 2015 at 21:01 — MBK
– MBK, Commented Dec 16, 2015 at 21:01

Community · Accepted Answer · 2017-05-23 10:28:54Z

1

Had similiar issue which was solved by moving ui-view below /tabset

<tabset> 
    <tab ng-repeat="tab in tabs" select="go(tab.route)"
        ui-sref-active="tab.active" heading="{{tab.title}}"
        active="tab.active" disable="tab.disabled"> 
    </tab>
</tabset>
<ui-view></ui-view>

See this answer

edited May 23, 2017 at 10:28

CommunityBot

11 silver badge

answered Jan 5, 2016 at 13:54

Susan Briggs

111 bronze badge

Sign up to request clarification or add additional context in comments.

Comments

Pascal Winter · Accepted Answer · 2015-12-16 20:42:23Z

0

I notice several things that could be changed. I'm not sure if they are causing your issue with double controller initialization however.

Your url definitions are redundant in your routes. because "logInfo" is a child state of "logs", you don't need to add "logs" to the url again. It will append to the end of the route.

This would suffice.

.state('logs.logInfo', {
    url : '/logInfo',

Using "ngInit" to initialize the state of your controller. There aren't many appropriate uses for ngInit, other than inside of an ng-repeat. You could just have your onLoad() function be called at the end of your controller. It would run once when the controller is initialized.

answered Dec 16, 2015 at 20:42

Pascal Winter

1142 bronze badges

1 Comment

MBK Over a year ago

ngInit is called at the end of the controller. Still, the other controllers are executed twice. url : '/logInfo' did not help...but point noted

heavyrick · Accepted Answer · 2016-07-02 18:12:14Z

0

I had the same problem and i got the answer here https://github.com/rpocklin/ui-router-tabs/issues/76

MyController.js

    $scope.tabs   = [
    {
        heading: 'Informações',
        route:   'costumer/edit.info',
        active:true
    },
    {
        heading: 'Observações',
        route:   'costumer/edit.observations',
        active:false
    }
];

index.html:

<tabs data="tabs" type="tabs"></tabs>    
<ui-view ng-if="tabs.active == $index"></ui-view>

edited Jul 2, 2016 at 18:12

answered Jul 2, 2016 at 18:07

heavyrick

3947 silver badges16 bronze badges

Collectives™ on Stack Overflow

Angular Js / ui- router / Tabs setup, Controller being called twice

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related