javascript - Angular Js/ui-路由器/选项卡设置， Controller 被调用两次

Question

我正在使用 ui-router，并且页面下有 2 个选项卡，可以通过导航栏进行导航(主页 || 日志 || 快速信息)。

单击“日志”后，我有 2 个选项卡(Tab1 和 Tab2)。我为每个选项卡设置了单独的 Controller ，为日志页面设置了一个主 Controller 。

单击日志页面时，MainCtrl 将执行一次。 Tab1 被激活，Tab1Ctrl 被执行两次......与 Tab2 相同。

代码如下: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>

日志 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";
});

另外 2 个 Controller 简单明了...只是 Controller 中的 div 标签和简单函数，用于填充 DOM 元素。

任何帮助都会很棒。

试图找出为单独的选项卡使用单独的 Controller 有什么问题。

提前致谢。

Answer 1

有类似的问题，通过将 ui-view 移动到/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>

参见this answer