当我经常切换MD-tabs时，MD-TABS正在正确切换，但是多个MD-TAB-ITEM元素同时具有'MD-Active'类，因此我无法请参阅Tab的内容，因为它与右选项卡的内容重叠。
根据我的说法，在Angular-Material中，当我们选择一个选项卡时，Angular首先取消选择"上一个"选项卡（在页面上隐藏了先前显示的内容）并显示选定的选项卡内容。在执行此过程时，Angular错过了删除以前活动选项卡的" MD活性"类。
这是复制行为的小提琴。这是随机行为，同时单击时出现。
单击"开关选项卡"按钮后，请等待1分钟jsfiddle
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毫秒内切换选项卡，但是在我们的应用程序中，我们也会以较长的时间间隔获得此问题。我们正在使用套接字进行发射板开关事件。
据我了解，您的想法是每x秒以编程方式更改选项卡，所以...
首先，使用AngularJS $interval代替setInterval()（这是因为SetInterval（）不关心Angular Digest）。
其次，您必须更新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>
正如OP在评论中所说的那样，通过在选择新选项卡之前从所有选项卡中手动删除MD Active类（通过更改data.selectedIndex中的代码中的代码中的所有选项卡）来解决。问题）。
对于那些不在我们的角度使用jQuery的人来说，JavaScript看起来像这样：
function fixMdTabsActive(tabsId, currentIndex)
{
var tabs = angular.element(document.getElementById(tabsId));
var elements = tabs.find('md-tab-item');
for (var i = 0; i < elements.length; ++i)
{
if (i != currentIndex)
{
angular.element(elements[i]).removeClass('md-active');
}
}
elements = tabs .find('md-tab-content');
for (var i = 0; i < elements.length; ++i)
{
if (i != currentIndex)
{
angular.element(elements[i]).removeClass('md-active');
}
}
}
我通过在我的MD-TAB定义中添加md-active="$index == data.selectedIndex"在我的代码中部分解决了此问题。从理论上讲，这不需要，但是当我构造我的选项卡时，我会将data.selectectex设置为最后一个选项卡，而第一个也是最后一个和最后一个将处于活动状态。添加此线后，它大多是有效的。我确实有一个种族条件，迫使我删除了OP评论和我的其他（社区）答案中记录的MD活动类别。