使用不同的更改选项卡索引的方法切换选项卡时,我遇到一种奇怪的行为。我可以通过ng-click使用md-selected
函数来更改$scope.changeQuestion
。我还可以使用md-tab的内置单击来更改md-selected
。 问题出在时,是我单击md-tab,然后尝试单击利用$scope.changeQuestion
功能的上一个或下一个按钮。如果单击选项卡,然后尝试使用按钮更改索引,则按钮不再更改选项卡索引。但是,它们确实记录了我想切换到的适当索引。
控制器
$scope.changeQuestion = function(index){
$scope.selectedQuestion = index;
};
html
<md-tabs md-selected='selectedQuestion' md-stretch-tabs md-dynamic-height md-border-bottom>
<md-tab ng-repeat='question in assessment.questions | toArrayKeepKeys | orderBy: "order"'>
<md-tab-label>
{{question.order}} <i class="fas fa-fire fire" ng-if='question.bonus'></i>
</md-tab-label>
<md-tab-body>
<div class='question-tab-content'>
<question class='margin-top-1em' details='question' answer='answers[question.key]'></question>
<div>
<md-button ng-click='changeQuestion($index - 1)' ng-hide='question.order === 1' class='md-primary md-raised no-left-margin'>Previous</md-button>
<md-button ng-click='changeQuestion($index + 1)' ng-hide='question.order === _.size(assessment.questions)' class='md-primary md-raised no-left-margin'>Next</md-button>
</div>
</div>
</md-tab-body>
</md-tab>
</md-tabs>
以下是行为示例:
我能够获得working example in codepen,但似乎无法在我的项目中使用它。
更新
尝试将$ watch放在$ scope.selectedQuestion上,如果我单击选项卡,则不会触发。就像md-selected ='selectedQuestion'和$ scope.selectedQuestion不同,但只有在单击选项卡之后。
答案 0 :(得分:0)
找到了解决方案: scope inheritance
将$scope.selectedQuestion = 0;
更改为$scope.selectedQuestion = { selected: 0 };
并更新其他引用可以达到目的。
无法解释:为什么codepen example在没有解决方案的修改的情况下工作