1

这很可能是另一个 Angular 范围问题。我努力寻找关于 SO 的解决方案，但是，我发现没有什么能解决我的问题。

我将 Angular.js 与Swiper.js一起使用。在外部垂直滑动器的一张幻灯片中，我有一个内部水平滑动器，仅在 ( ng-if) 用户选择音频（不是视频）时显示；然后用户可以在多个图像之间滑动 ( ng-repeat)。这些图像有我想点击的标题 ( ng-click)，因此它们可以被隐藏/显示 ( ng-show)。

一切正常，除了点击后隐藏和显示。我尝试在几个代码级别（div）之间分配 ng 指令，并且尝试调用或不调用我的控制器函数。

这是我的代码：

<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');
                });
            }
        }
    }
}]);

在上面的代码中，我尝试不引用控制器中的函数，但在其他版本中，我尝试通过放置以下内容从（多个，我猜）子范围重新连接到 $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 功能没有按预期工作。任何想法可能是什么问题？

4

0 回答 0