Опять же: ng-click не работает внутри ng-repeat внутри ng-if

Скорее всего, это будет еще один вопрос с угловой областью. Я упорно искал решения на SO, однако, ничего не нашел бы решить мою проблему.

Я использую Angular.js вместе с Swiper.js. Внутри одного слайда внешнего вертикального поворотника у меня есть внутренний горизонтальный поворотник, показывающий только если (ng-if) пользователь выбирает аудио (не видео); тогда пользователь может провести пальцем между несколькими изображениями (ng-repeat). Эти изображения имеют подписи, которые я хочу кликнуть (ng-click) чтобы их можно было скрыть / показать (ng-show).

Все работает, кроме скрытия и показа после клика. Я попытался распределить ng-директивы по нескольким уровням кода (div), и я пытался делать с или без вызова функций моего контроллера.

Вот мой код:

<div ng-if="selectedMedium().class === 'Audio'" class="swiper-container swiper-container-images">
    <div class="swiper-wrapper">
        <div ng-repeat="image in selectedImages track by $index" end-repeat class="swiper-slide images">
            <img class="image" ng-src="{{ image }}">
            <a class="caption" href="#" ng-init="show = true" ng-show="show" ng-click="show = !show">{{ selectedCaptions[$index] }}</a>
        </div>
    </div>
    <div class="swiper-pagination"></div>
</div>

Для полноты картины я включаю функцию $scope.selectedMedium (внутри контроллера) и директиву end-repeat (которая объединяет Angular и Swiper вне контроллера):

$scope.selectedMedium = function() {
    for (var i = 0; i < $scope.media.length; i++) {
        if ($scope.media[i].person === $scope.selectedPerson.person && $scope.media[i].topic === $scope.selectedTopic.topic) {
            $scope.selectedImages = ("imageFiles" in $scope.media[i]) ? $scope.media[i].imageFiles : null;
            $scope.selectedCaptions = ("imageSubtitles" in $scope.media[i]) ? $scope.media[i].imageSubtitles : null;
            return $scope.media[i];
        }
    }
    return "Error";
};

myApp.directive('endRepeat', ['$timeout', function($timeout) {
    return {
        restrict: 'A',
        link: function(scope, element, attr) {
            if (scope.$last === true) {
                $timeout(function() {
                    scope.$emit('ngRepeatFinished');
                });
            }
        }
    }
}]);

В приведенном выше коде я пытался обойтись без каких-либо ссылок на функции в моем контроллере, но в других версиях я пытался переподключить (несколько, я полагаю) childscope(s) к $ scope, поместив что-то вроде:

<a class="caption" href="#" ng-show="$parent.isCaptionShowing[$index]" ng-click="$parent.isCaptionShowing[$index] = !$parent.isCaptionShowing[$index]">{{ selectedCaptions[$index] }}</a>

Я даже пытался $parent.$parent.isCaptionShowing[$index], Для этого подхода я добавил следующую строку в свою функцию $scope.selectedMedium:

$scope.isCaptionShowing = ($scope.selectedCaptions !== null) ? new Array($scope.selectedCaptions.length).fill(true) : null;

Ни один из подходов (все в HTML-коде против вызова функций контроллера) не сработал. Мне кажется, что функция ng-click работает не так, как задумано. Есть идеи, в чем может быть проблема?

0 ответов