Question

我使用的是ui-router，页面下有2个标签，可以通过导航栏导航（主页||日志||快速信息）。

单击日志时，我有2个选项卡（Tab1和Tab2）。我为每个选项卡分别设置了控制器，为Log Page设置了主控制器。

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

通过移动下面/ tabset的ui-view来解决类似的问题

<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

我注意到一些可以改变的事情。我不确定它们是否会导致双控制器初始化问题。

您的网址中的网址定义是多余的。因为＆＃34; logInfo＆＃34;是一个儿童状态＆＃34;日志＆＃34;，您不需要添加＆＃34;日志＆＃34;再次到网址。它将附加到路线的末尾。

这就足够了。

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

使用＆＃34; ngInit＆＃34;初始化控制器的状态。除了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>

Angular Js / ui- router / Tabs设置，Controller被调用两次

3 个答案: