изменение md-selected с помощью md-tabs и использование кнопки md (prev, next) - PullRequest
Новая
       34

изменение md-selected с помощью md-tabs и использование кнопки md (prev, next)

0 голосов
/ 01 июля 2019

Я испытываю странное поведение при переключении вкладок, используя различные способы изменения индекса вкладок.Я могу изменить md-selected, используя функцию $scope.changeQuestion с помощью ng-click.Я также могу использовать встроенный щелчок md-tab, чтобы изменить md-selected. Проблема заключается в том, что я нажимаю на вкладку md, а затем пытаюсь нажать мои предыдущие или следующие кнопки, которые используют функцию $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>

Вот пример поведения:

enter image description here

Мне удалось получить рабочий пример в codepen , но я могу 'Кажется, он не работает в моем проекте.

Обновление

Попытка установить $ watch на $ scope.selectedQuestion, и он не срабатывает, если я нажимаювкладки.Это похоже на то, что md-selected = 'selectedQuestion' и $ scope.selectedQuestion отличаются, но только после того, как я нажму на вкладку.

1 Ответ

0 голосов
/ 02 июля 2019

Найденное решение: наследование области действия

Изменение $scope.selectedQuestion = 0; на $scope.selectedQuestion = { selected: 0 }; и обновление других ссылок сделали свое дело.

Необъяснимо: почему пример кодового ручки работает без изменений из решения

...