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>

这是我主视图中的JS ctrl

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

使用ngAnimate和angular-ui在模态中使用carousel的问题

1 个答案: