当我经常切换md-tabs时,Md-tabs正确切换,但是多个md-tab-item元素同时具有’md-active’类,所以我看不到标签的内容是活动的,因为它是重叠的通过其右侧标签的内容.
根据我的说法,在角度材质中,当我们选择一个选项卡时,角度首先取消选择上一个选项卡(隐藏页面上先前显示的内容)并显示选定的选项卡内容.在执行此过程时,角度未命中删除先前活动的选项卡的“md-active”类.
这是重现行为的小提琴.这是随机行为,同时发生并发点击.
angular.module('firstApplication',['ngMaterial']).controller('tabController',tabController);
function tabController ($scope) {
$scope.boards = Array.from(Array(100).keys());
$scope.data = {
selectedIndex: 0,secondLocked: true,secondLabel: "2",bottom: false
};
$scope.next = function() {
$scope.data.selectedIndex = Math.min($scope.data.selectedIndex + 1,2) ;
};
$scope.prevIoUs = function() {
$scope.data.selectedIndex = Math.max($scope.data.selectedIndex - 1,0);
};
$scope.switch = function() {
$scope.activeTabsCounter = $("md-tab-item.md-active").length;
}
/********* Here i am changing tabs ****8**/
/******** This is strict behavIoUr where I get the problem but randomly *****/
$scope.switchTabs = function(){
clearInterval(interval);
var i = $scope.boards.length - 1;
var interval = setInterval(function() {
if($scope.activeTabsCounter == 1) {
if(i >= 0)
$(".md-accent md-tab-item")[i--].click();
$scope.switchTabs();
} else {
clearInterval(interval);
}
},100);
/********* /Here i am changing tabs ****8**/
}
}
<link href="https://rawgit.com/angular/bower-material/master/angular-material.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.js"></script>
<script src="https://rawgit.com/angular/bower-material/master/angular-material.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-aria.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div ng-app="firstApplication">
<div id="tabContainer" ng-controller="tabController as ctrl" ng-cloak>
<div> <br><br>
<button ng-click="switchTabs()">Click here to switch tabs</button>
<br><br>
Current active Tabs: {{activeTabsCounter}}
<br>
</div>
<md-content class="md-padding">
<md-tabs class="md-accent" md-selected="data.selectedIndex" md-align-tabs="{{data.bottom ? 'bottom' : 'top'}}">
<md-tab md-on-select="switch()" id="tab{{board}}" ng-repeat="board in boards">
<canvas id="canvas-{{board}}-1" width="1600" height="900"></canvas>
<canvas id="canvas-{{board}}-2" width="1600" height="900"></canvas>
<md-tab-label>{{board}}</md-tab-label>
<md-tab-body>Item #{{board}} <br/>selectedIndex = {{board}};</md-tab-body>
</md-tab>
</md-tabs>
</md-content>
</div>
</div>
我在100毫秒内切换标签,但在我们的应用程序中,我们也在更长的时间间隔内得到此问题.我们使用socket发出板切换事件.
解决方法
据我所知,你的想法是每X秒以编程方式更改标签,所以……
首先,使用angularJs $interval而不是setInterval()(因为setInterval()不关心角度摘要).
其次,你必须更新selectedIndex而不是调用click()事件…
最后,删除活动选项卡检查(我想您已添加进行测试)
首先,使用angularJs $interval而不是setInterval()(因为setInterval()不关心角度摘要).
其次,你必须更新selectedIndex而不是调用click()事件…
最后,删除活动选项卡检查(我想您已添加进行测试)
我已经更新了你的jsFiddle
控制器：
function tabController($scope,$interval) {
$scope.boards = Array.from(Array(100).keys());
$scope.data = {
selectedIndex: 0
};
$scope.switchTabs = function() {
var size = $scope.boards.length - 1;
var interval = $interval(function() {
if(size >= 0){
$scope.data.selectedIndex = size--;
}else{
$interval.cancel(interval);
}
},750);
}
}
HTML：
<md-tabs class="md-accent" md-selected="data.selectedIndex">
<md-tab ng-repeat="board in boards">
<md-tab-label>{{board}}</md-tab-label>
<md-tab-body>
Item #{{board}}<br/>
selectedIndex = {{board}};
</md-tab-body>
</md-tab>
</md-tabs>
