0

我的应用程序中有一项modal服务可以打开/关闭模式。当模式打开时，它会从具有指定 id 的 div 中提取它，该 id 始终位于隐藏content的容器内。elem通常这工作正常。

我现在遇到的问题是，当用户mediaBrowser第一次使用指令打开模式时，他们可以在照片/视频选项卡之间导航并选择要附加到帖子的项目。如果模式关闭并重新打开，则没有任何效果。照片按预期加载，但单击一张没有任何作用。就好像mediaBrowserormediaBrowserPhotos指令中的任何功能都不起作用。

我认为它可能与compile从一个 DOM 元素移动到另一个 DOM 元素后需要指令有关，但我没有太多运气通过$compile服务解决它。

这是我的modal服务：

app.service('modal', [function() {
    var modal = this;
    modal.settings = {};
    modal.overlay = $('<div id="overlay"></div>');
    modal.modal = $('<div id="modal"></div>');
    modal.content = $('<div id="content"></div>');
    modal.closeBtn = $('<div id="close"><i class="fa fa-times"></div>');

    modal.modal.hide();
    modal.overlay.hide();
    modal.modal.append(modal.content, modal.closeBtn);

    $(document).ready(function(){
        $('body').append(modal.overlay, modal.modal);
    });

    modal.open = function (settings) {
        modal.settings = settings;
        var content = modal.settings.content;

        modal.content.empty().append(content);
        if(modal.settings.class) modal.modal.addClass(modal.settings.class);
        if(modal.settings.height) modal.modal.css({ height: settings.height });
        if(modal.settings.width) modal.modal.css({ width: settings.width });
        if(modal.settings.content_height) modal.modal.css({ height: settings.content_height });
        if(modal.settings.content_width) modal.modal.css({ width: settings.content_width });
        if(modal.settings.fitToWindow) {
            modal.settings.width = $(window).width() - 160;
            modal.settings.height = $(window).height() - 160;
        };
        center(modal.settings.top);

        $(window).bind('resize.modal', center);
        modal.modal.show();
        modal.overlay.show();

        $(modal.closeBtn).add(modal.overlay).on('click', function(e) {
            e.stopPropagation();
            modal.close();
        });
        $(document).on('keyup', function(e) {
            if (e.keyCode == 27) {
                modal.close();
                $(document).unbind('keyup');
            }
        })
    };

    modal.close = function() {
        var elem = modal.settings.elem;
        var content = modal.settings.content;

        elem.empty().append(content);

        modal.modal.hide();
        modal.overlay.hide();
        modal.content.empty();
        $(window).unbind('resize.modal');
    };

    function center(top) {
        if(!top || !isInt(top)) top = 130;
        var mLeft = -1 * modal.modal.width() / 2;
        modal.modal.css({
            top: top + 'px',
            left: '50%',
            marginLeft: mLeft
        });
        function isInt(n) {
           return n % 1 === 0;
        }
    }
}]);

我的应用程序中还有一个mediaBrowser指令，其中包含 2 个代表照片和视频选项卡的子指令。这是我的mediaBrowser指令：

app.directive('mediaBrowser', ['$rootScope', 'profileAPI', 'photosAPI', 'videosAPI', function($rootScope, profileAPI, photosAPI, videosAPI) {
    return {
        replace: true,
        templateUrl: '/assets/employers/media_browser.html',
        scope: {
            model: '=',
            card: '=',
            type: '=',
            photoContainer: '=',
            videoContainer: '=',
            mediaBrowserContainer: '=',
            mediaBrowserForm: '='
        }, controller: ['$scope', '$rootScope', 'profileAPI', 'photosAPI', 'videosAPI', function($scope, $rootScope, profileAPI, photosAPI, videosAPI) {
            $scope.mediaView = profileAPI.mediaView;
            resize($scope.mediaView);

            $rootScope.$on('mService:keyChanged', function resultsUpdated(event, value) {
                $scope.mediaView = profileAPI.mediaView;
                resize($scope.mediaView);
            });

            $scope.setMediaView = function(view) {
                profileAPI.mediaView = view;
            };

            function resize(resource) {
                if(resource === 'photos') {
                    photosAPI.resizeColumns('#media_browser_photos_new_' + $scope.type);
                } else if (resource === 'videos') {
                    videosAPI.resizeColumns('#media_browser_videos_new_' + $scope.type);
                }
            }
        }]
    }
}]);

这是该mediaBrowser指令的部分内容：

<div style="display:none" id="{{mediaBrowserContainer}}">
    <div id="{{mediaBrowserForm}}">
        <div class="row">
            <div class="col-lg-12">
                <div class="row subheader modal-tabs">
                    <ul class="nav navbar-nav">
                        <li ng-class="{'active-sub': mediaView === 'photos'}">
                            <a ng-click="setMediaView('photos');">Photos</a>
                        </li>
                        <li ng-class="{'active-sub': mediaView === 'videos'}">
                            <a ng-click="setMediaView('videos');">Videos</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="row" ng-if="mediaView === 'photos'">
            <div media-browser-photos
                model="model"
                container="photoContainer"
                media-browser-container="mediaBrowserContainer"
                media-browser-form="mediaBrowserForm"
                for-type="type"
                mode="'new'">
            </div>
        </div>

        <div class="row" ng-if="mediaView === 'videos'">
            <div media-browser-videos
                model="model"
                container="videoContainer"
                media-browser-container="mediaBrowserContainer"
                media-browser-form="mediaBrowser"
                for-type="type"
                mode="'new'">
            </div>
        </div>
    </div>
</div>

这是我的mediaBrowserPhotos指令。请注意，视频版本与照片基本相同：

app.directive('mediaBrowserPhotos', ['$rootScope', '$timeout', '$q', 'photosAPI', 'modal', function($rootScope, $timeout, $q, photosAPI, modal) {
    return {
        replace: true,
        templateUrl: '/assets/employers/media_browser_photos.html',
        scope: {
            container: '=',
            model: '=',
            mediaBrowserContainer: '=',
            mediaBrowserForm: '=',
            forType: '=',
            mode: '='
        }, controller: ['$scope', '$rootScope', '$timeout', '$q', 'photosAPI', 'modal', function($scope, $rootScope, $timeout, $q, photosAPI, modal) {
            $scope.current_page = photosAPI.current_page;
            $scope.results = [];
            $scope.loading = false;
            $scope.num_pages = 0;
            $scope.page_numbers = photosAPI.page_numbers;
            $scope.total_count = 0;
            $scope.count = 0;
            $scope.order = false;
            var thumbSize = 150;
            var q = $scope.current_page;

            $rootScope.$on('cService:keyChanged', function resultsUpdated(event, value) {
                $scope.results = photosAPI.results;
                $scope.loading = photosAPI.loading;
                $scope.num_pages = photosAPI.num_pages;
                $scope.page_numbers = photosAPI.page_numbers;
                $scope.total_count = photosAPI.total_count;
            });

            $scope.selectMedia = function(options) {
                if($scope.mode === 'new') {
                    var content = '#add_card_form';
                    var elem = '#add_card_form_container';
                } else {
                    var content = '#' + $scope.forType + '_' + $scope.model.id + '_form';
                    var elem = '#' + $scope.forType + '_' + $scope.model.id + '_form_container';
                };

                $scope.model[options.type] = options.object;
                modal.close();
                modal.open({
                    content: $(content),
                    elem: $(elem),
                    height: '594px',
                    content_height: '578px'
                })
            }
        }]
    }
}]);

这是部分的mediaBrowserPhotos：

<div class="column-layout cols-3 search-results-no-resize" id="{{container}}">
    <div class="multiple-photo-upload media">
        <button type="button" class="btn btn-default dropdown-toggle" ng-click="orderAsc();">
            Sort by Date
            <a href="#" ng-show="order">Oldest First <i class="fa fa-arrow-up" style="font-size: 1.3em;"></i></a>
            <a href="#" ng-show="!order">Newest First <i class="fa fa-arrow-down" style="font-size: 1.3em;"></i></a>
        </button>
        <div class="paginator" ng-if="page_numbers.length > 1">
            <div class="page-btn prv" ng-click="prevPage()"><i class="fa fa-chevron-left"></i></div>
            <div class="page-btn" ng-repeat="p in page_numbers" ng-class="{'current':p === current_page}" ng-click="loadPage(p)">{{p}}</div>
            <div class="page-btn nxt" ng-click="nextPage()"><i class="fa fa-chevron-right"></i></div>
        </div>
    </div>
    <div class="results-label media"><b>{{total_count}}</b>&nbsp;<span ng-if="total_count == 1">Photo</span><span ng-if="total_count != 1">Photos</span></div>
    <div class="media-browser photos" ng-show="!loading && total_count > 0">
        <div class="col">
            <div ng-repeat="r in results" class="card result-link">
                <div class="content result">
                    <div class="image-container" ng-style="{'background-image': 'url(' + r.image_url + ')'}" ng-click="$parent.selectMedia({object: r, type: 'image'})"></div>
                </div>
            </div>
        </div>
        <div class="col" style="display:none"></div>
        <div class="col" style="display:none"></div>
        <div class="col" style="display:none"></div>
        <div class="col" style="display:none"></div>
        <div class="col" style="display:none"></div>
        <div class="col" style="display:none"></div>
        <div class="col" style="display:none"></div>
        <div class="col" style="display:none"></div>
        <div class="col" style="display:none"></div>
        <div class="col" style="display:none"></div>
        <div class="col" style="display:none"></div>
        <br style="clear:both" />
    </div>
    <div ng-show="loading" class="loading-results">
        <i class="fa fa-spinner fa-spin"></i>
    </div>
</div>

整个应用程序本身非常复杂，很难在 Plucker/Fiddle 中重现。任何帮助将不胜感激。让我知道您需要应用程序中的任何其他代码！

4

1 回答 1

0

试试这个：不要移动整个东西，而是将它包裹在另一个元素中，将那个元素留在原处并移动你现在正在移动的同一个元素（现在是你的链接函数中元素的子元素）。

如果您不使用replace:true，无论如何都已弃用，您将免费获得该元素（指令的元素）。

祝你好运！

于 2015-12-04T16:52:07.407 回答