首页 文章

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

提问于
浏览 次
1

我正在使用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>

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

其他2个控制器简单明了...只需在控制器中使用div标签和普通函数来填充DOM元素 .

任何帮助都会很棒 .

试图弄清楚为单独的选项卡使用单独的控制器有什么问题 .

提前致谢 .

javascript angularjs angular-ui-router

3 回答

  • 1

    有类似的问题，通过移动下面/ 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>

    见this answer

    回复于
  • 0

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

    • 您的网址中的网址定义是多余的 . 因为"logInfo"是"logs"的子状态，所以您不需要再次将"logs"添加到该URL . 它将附加到路线的末尾 .

    这就足够了 .

    .state('logs.logInfo', {
    url : '/logInfo',
    • 使用"ngInit"初始化控制器的状态 . ngInit没有很多适当的用途，除了ng-repeat内部 . 您可以在控制器的末尾调用onLoad（）函数 . 初始化控制器时它会运行一次 .
    回复于
  • 0

    我有同样的问题，我在这里得到答案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>
    回复于

相关问题