Angular Js / ui- router / Tabs 设置，控制器被调用两次

Question

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

单击日志时，我有 2 个选项卡（Tab1 和 Tab2）。每个选项卡都有单独的控制器，日志页面有一个主控制器。

单击日志页面时，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>

日志控制器

'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 个控制器简单明了...只是 div 标签和控制器中用于填充 DOM 元素的普通函数。

任何帮助都会很棒。

试图找出为单独的选项卡设置单独的控制器有什么问题。

提前致谢。

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

Answer 2

我注意到有几件事情可以改变。但是，我不确定它们是否会导致您的双控制器初始化问题。

1. 您的 url 定义在您的路由中是多余的。因为“logInfo”是“logs”的子状态，所以不需要再次在url中添加“logs”。它将附加到路线的末尾。

这就够了。

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

1. 使用“ngInit”初始化控制器的状态。除了在 ng-repeat 内部之外，ngInit 没有很多合适的用途。您可以在控制器的末尾调用 onLoad() 函数。它会在控制器初始化时运行一次。

Answer 3

我遇到了同样的问题，我在这里得到了答案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>