Angular Js/ui-路由器/选项卡设置,控制器被调用两次
Angular Js / ui- router / Tabs setup, Controller being called twice
我使用的是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>
请参阅此答案
我注意到一些可以更改的内容。但是,我不确定它们是否会导致您的双控制器初始化问题。
- 您的url定义在路由中是多余的。因为"logInfo"是"logs"的子状态,所以不需要再次向url添加"log"。它将附加到路由的末尾
这就足够了。
.state('logs.logInfo', {
url : '/logInfo',
- 使用"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>
相关文章:
- Meteor Router数据函数被调用两次
- Backbone.js ListenToOnce被调用两次
- 为什么DTM数据元素被调用两次
- 模态中的数据关闭在单击时被调用两次
- java-script 函数被调用两次
- rails4-javascript文件需要调用两次才能工作
- javascript点击被调用两次甚至两次以上
- 回调函数在引导模态上调用两次甚至更多次
- 具有超时的地理位置会导致错误处理程序被调用两次
- 如何在同一元素中调用两次onclick
- 调用两次时间更新
- 聚合物元素注册和生命周期(创建和准备调用两次)
- AngularJS自定义过滤器被调用两次
- 为什么 console.log() 被调用两次而不是一次
- Phonegap PushPlugin 消息事件被调用两次
- jquery 使用承诺调用两次动画完成
- .is(“:animated”) 选择器在动画期间返回 true,并调用两次
- 调用两次时 jQuery 偏移量(坐标)的行为不一致
- 为什么单击处理程序被调用两次
- $(document).ready(function(){} jquery被调用两次