Angular Js/ui路由器/選項卡設置，控制器被調用兩次

Question

我正在使用ui路由器，並在可以通過導航欄（主頁||日誌||快速信息）導航的頁面下有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個控制器是簡單明瞭...在控制器用於填充DOM元素只是div標籤和滑動功能。

任何幫助將是偉大的。

試圖找出單獨的標籤單獨控制器有什麼問題。

在此先感謝。

Answer 1

我注意到幾件事情可以改變。我不確定它們是否會導致雙控制器初始化問題。

1. 您的網址定義在您的路線中是多餘的。因爲「logInfo」是「日誌」的子狀態，所以不需要再次向URL中添加「日誌」。它將追加到路線的末尾。

這就夠了。

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

使用 「ngInit」 來初始化控制器的狀態。除ng-repeat之外，ngInit沒有太多合適的用途。您可以在控制器的末尾調用onLoad（）函數。它將在控制器初始化時運行一次。

Answer 2

具有通過移動下面的UI畫面/標籤集解決similiar問題

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