Опять же: 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 работает не так, как задумано. Есть идеи, в чем может быть проблема?