Angular Js/ui-路由器/选项卡设置,控制器被调用两次

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

本文关键字:调用 两次 控制器 ui- Js 路由器 选项 设置 Angular      更新时间:2023-09-26

我使用的是ui路由器,在一个页面下有两个选项卡,可以通过导航栏(主页||日志||快速信息)进行导航。

在单击日志时,我有两个选项卡(选项卡1和选项卡2)。我为每个选项卡都有单独的控制器,为日志页有一个主控制器。

单击日志页面时,MainCtrl将执行一次。Tab1被激活,Tab1Ctrl被执行两次。。与表2相同。

这是代码: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元素的普通函数。

任何帮助都将是伟大的。

试图弄清楚为单独的选项卡设置单独的控制器有什么错。

提前谢谢。

有类似的问题,通过移动/tabset 下面的ui视图解决了这个问题

<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>

请参阅此答案

我注意到一些可以更改的内容。但是,我不确定它们是否会导致您的双控制器初始化问题。

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

这就足够了。

.state('logs.logInfo', {
    url : '/logInfo',
  1. 使用"ngInit"初始化控制器的状态。除了在ng-reeat内部之外,ngInit没有太多合适的用途。您可以在控制器的末尾调用onLoad()函数。它将在控制器初始化时运行一次

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