使用 ngAnimate 和 angular-ui 的模态轮播问题

Question

我正在更新这个问题以更好地适应这个主题，看起来 Angular v1.4.8、Angular Animate 1.4.8 和 Angular Bootstrap 0.14.3 之间存在冲突，在将 ngAnimate 作为依赖项之后，这会破坏轮播的功能模态的。你可以在这里看到updated demo

有没有人遇到过类似的问题？

请参阅随附的屏幕截图。

这是我的 main.html

         <div class="col-md-3 col-xs-6" ng-repeat="thumb in thumbs">
                       <img ng-src="{{thumb.image}}" alt="{{thumb.name}}" class="img-responsive" ng-click="open($index)" />
                    </div>

这是我的模态库模板：

<div class="modal-body">
          <div class="img-group">
            <uib-carousel>
              <uib-slide ng-repeat="thumb in thumbs" active="thumb.active">
                <img ng-src="{{thumb.image}}" alt="{{thumb.name}}" class="img-responsive pic" />
                <div class="carousel-caption">{{thumb.name}}</div>
              </uib-slide>
            </uib-carousel>
            <button type="button" class="close close-lg" ng-click="closeGallery()"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
          </div>
        </div>

这是我的主视图 ctrl 中的 JS

'use strict';

        angular.module('creativestudioApp')
            .controller('MainCtrl', function($scope, $http, Auth, $document, $uibModal, $timeout, socket) {

                $scope.thumbs = [{
                    "image": "https://d13yacurqjgara.cloudfront.net/users/14501/screenshots/2362120/preview.jpg",
                    "name": "Cat on Fence"
                }, {
                    "image": "https://d13yacurqjgara.cloudfront.net/users/193037/screenshots/876358/11q2.png",
                    "name": "Cat in Sun"
                }, {
                    "image": "https://d13yacurqjgara.cloudfront.net/users/14501/screenshots/2362120/preview.jpg",
                    "name": "Blue Eyed Cat"
                }, {
                    "image": "https://d13yacurqjgara.cloudfront.net/users/193037/screenshots/876358/11q2.png",
                    "name": "Patchy Cat"
                }, {
                    "image": "https://d13yacurqjgara.cloudfront.net/users/14501/screenshots/2362120/preview.jpg",
                    "name": "Feral Cats"
                }, {
                    "image": "https://d13yacurqjgara.cloudfront.net/users/193037/screenshots/876358/11q2.png",
                    "name": "Mad Cat"
                }, {
                    "image": "https://d13yacurqjgara.cloudfront.net/users/14501/screenshots/2362120/preview.jpg",
                    "name": "Fluffy Cat"
                }, {
                    "image": "https://d13yacurqjgara.cloudfront.net/users/193037/screenshots/876358/11q2.png",
                    "name": "Cat Laying Down"
                }];

                $scope.open = function(indx) {
                    console.log($scope.thumbs);
                    $scope.thumbs[indx].active = true;

                    var modalInstance = $uibModal.open({
                        animation: true,
                        templateUrl: 'components/modal-gallery/modal-gallery.html',
                        controller: 'ModalGalleryCtrl',
                        resolve: {
                            thumbs: function() {
                                console.log('resolve', $scope.thumbs);
                                return $scope.thumbs;
                            }
                        }
                    });

                };

                $scope.closeGallery = function() {
                    $scope.modalInstance.dismiss('cancel');
                };

            });

这是我的画廊 ctrl

angular.module('creativestudioApp')
          .controller('ModalGalleryCtrl', function ($scope, $uibModalInstance, thumbs) {
            $scope.thumbs = thumbs;
            console.log('from modal ctrl', $scope.thumbs);
            $scope.closeGallery = function () {
                $uibModalInstance.dismiss('cancel');
            };

          });

Answer 1

似乎当指令被链接时，$destroy 方法没有被调用，并且幻灯片上的active 属性没有被设置为false。从您提供的代码中，我无法弄清楚为什么会发生这种情况，但您可以尝试以显式方式将 false 值设置为 active 属性：

$scope.open = function(indx) {                    
    angular.forEach($scope.thumbs, function(e, k) {
        $scope.thumbs[k].active = false; 
    });
//...