В моем приложении Angular у меня есть md-tabs, директива md-selected привязана к свойству в моем контроллере. Я хотел бы изменить текущую вкладку на ту, чей индекс задан функцией, называемой ng-click в другом месте в моем шаблоне.
Я сделал это следующим образом:
<div ng-controller="TrackingCtrl" layout-fill>
<md-content ng-if="isSmart" layout-fill>
<md-tabs md-selected="selectedIndex" layout-fill>
<md-tab>.........</md-tab>
<md-tab>.........</md-tab>
<md-tab>.........</md-tab>
<md-tab>
<md-tab-label>{{ 'tracking.positions.TITLE' | translate }}</md-tab-label>
<md-tab-body>
<md-tab-content layout-fill flex>
<button ng-click="map.panTo(getPosition());displayMap();"></button>
</md-tab-body>
</md-tab>
</md-tabs>
</md-content>
</div>
В моем контроллере я:
$scope.selectedIndex = 0;
$scope.displayMap = function() {
$scope.selectedIndex = 1;
};
Но это не имеет никакого эффекта, когда я нажимаю кнопку, вызывающую displayMap();
Я проверил проблему:
- Когда я устанавливаю $scope.selectedIndex = 1; в моем контроллере вкладка по умолчанию - та, которая имеет индекс 1. OK
- Когда я устанавливаю md-selected = "1" в моем шаблоне, вкладка по умолчанию - та, которая имеет индекс 1. OK
- Когда я устанавливаю точку останова в своем коде, и когда я нажимаю на свою кнопку, вызывается displayMap() и $scope.selectedIndex = 1; выполняется. OK
Кажется, все работает отлично... кроме того, что вкладка не изменяется.
Я запускаю Angular Материал 1.0.2
Я даже использовал $apply для принудительного обновления (без эффекта):
$scope.selectedIndex = 0;
$scope.displayMap = function () {
$timeout(function () {
if (!$scope.$$phase) {
$scope.$apply(function () {
$scope.selectedIndex = 1;
});
}
});
};