javascript - Angular UI Modal 导致无限摘要循环

Question

我一直在努力创建一个系统，以允许在模式弹出窗口中检索和打开文章。它已使用 Bootstrap 模式成功实现，但由于一些新的要求，我需要转换为使用 Angular UI 模式。

我认为问题源于我通过 Angular 的 $location.search() 对 URL 更改的处理，但我无法确定它。

自从添加 $uibModal.open() 调用后，每当我单击一篇文章时就会​​发生这种无限摘要循环，这会在我的 Controller 中启动 openModal 函数。

我将在下面包含我的 Controller 代码和我收到的错误消息。 Controller 的两个入口点位于 $rootScope.$on 和 $scope.$watch 调用的底部附近。它们允许模式响应 URL 中的更改。

最终目标是能够在 URL 更改时打开 Angular UI 模式，以便我可以在模式关闭时删除 URL 参数。

感谢您的帮助!

我的 Controller :

(function () {
    'use strict';

    //Create the LinkModalController and bind it to the core app. This makes it always available.
    angular
        .module('app.core')
        .controller('LinkModalController', LinkModalController);

    LinkModalController.$inject = ['$location', '$q', '$rootScope', '$scope', '$uibModal', 'contentpartservice', 'logger'];
    /* @ngInject */

    function LinkModalController($location, $q, $rootScope, $scope, $uibModal, contentpartservice, logger) {
        var vm = this;

        /*--------------Variable Definitions--------------*/
        vm.modalData = {};
        vm.isModalLoading = true;
        vm.selectedTab;
        vm.urlHistory;

        /*--------------Function Definitions--------------*/
        vm.selectTab = selectTab;
        vm.openModal = openModal;

        /*Activate Controller*/
        activate();

        /*--------------Functions--------------*/
        /*Announcement clicks are handled separately because the announcement data contains the full article*/
        function handleAnnouncementClick(data) {
            vm.modalData = data;
            $("#announcementModal").modal();
            return;
        }

        /*Set the active tab for the open modal*/
        function selectTab(tab) {
            vm.selectedTab = tab;
            return;
        }

        /*Clicking an article of any content type should be funneled through this function. Eventually to be merged with handleSearchResultClick*/
        function handleContentTypeClick(data) {
            setUrl(data.id, data.contentType.value);
            return;
        }

        function handleUrlParamsModalLaunch(data) {
            console.log('launching modal');
            /*Ensure modal is not displaying any data*/
            vm.modalData = {};
            vm.selectedTab = null;

            /*Show modal loading screen*/
            vm.isModalLoading = true;
            var modalInstance = $uibModal.open({
                templateUrl: 'app/modals/contentTypeModalTemplate.html',
                controller: 'LinkModalController as vm',
            });

            /*Call the content service to return the clicked content article*/
            contentpartservice.getContentItem(data.id, data.type).then(function (contentItem) {
                if (contentItem) {
                    vm.isModalLoading = false;
                    vm.modalData = contentItem;
                    return;
                } else {
                    closeModal("#contentPartModal").then(function () {
                        vm.isModalLoading = false;
                        logger.error('An error occurred while fetching content');
                    });
                    return;
                }
            }, function (error) {
                closeModal("#contentPartModal").then(function () {
                    vm.isModalLoading = false;
                    logger.error('An error occurred while fetching content');
                });
                return;
            });
        }

        /*Close a modal and return a promise object - This allows other code to be executed only after the modal closes*/
        function closeModal(modalId) {
            $(modalId).modal('hide');

            var defer = $q.defer();
            defer.resolve();

            return defer.promise;
        }

        //Function to append information to the URL required to retrieve the displayed article
        function setUrl(contentId, contentType) {
            var urlParams = $location.search();

            if (urlParams.q) {
                $location.search({ q: urlParams.q, type: contentType, id: contentId });
            } else {
                $location.search({ type: contentType, id: contentId });
            }

            console.log($location.search());
            return;
        }

        /*Route link click calls to handle different data structures*/
        function openModal(data, context) {
            switch (context) {
                case 'urlParams':
                    handleUrlParamsModalLaunch(data);
                    break;
                case 'announcement':
                    handleAnnouncementClick(data);
                    break;
                case 'contentType':
                    handleContentTypeClick(data);
                    break;
                default:
                    logger.error('An error occurred while fetching content');
            }

            return;
        }

        /*--------------Listeners--------------*/

        /*Catch links click events broadcast from the $rootScope (shell.controller.js)*/
        $rootScope.$on('openModal', function (event, data, context) {
            vm.openModal(data, context);
            return;
        });

        /*--------------Activate Controller--------------*/
        function activate() {
            /*Create a watcher to detect changes to the URL*/
            $scope.$watch(function () { return $location.search() }, function () {
                alert('url changed');
                /*Wait for modals to render*/
                var urlParams = $location.search();

                if (urlParams.type && urlParams.id) {
                    vm.openModal(urlParams, 'urlParams');
                }

                /*Handle the inital page load. (Must wait until content is loaded to open modal). This code only runs once.*/
                $rootScope.$on('$includeContentLoaded', function () {
                    alert('url changed first laod');
                    /*Wait for modals to render*/
                    var urlParams = $location.search();

                    if (urlParams.type && urlParams.id) {
                        vm.openModal(urlParams, 'urlParams');
                    }
                });
            }, true);
        }
    }
})();

记录的错误消息是一大段文本，因此我将其粘贴到 Google 文档中:https://docs.google.com/document/d/1esqZSMK4_Tiqckm-IjObqTvMGre2Ls-DWrIycvW5CKY/edit?usp=sharing

Answer 1

不知道您是否在应用的配置模块中尝试过 $locationProvider.html5Mode(true); 。如果您使用 jquery 模型打开弹出窗口，则 Angular 和 jquery 之间可能会发生冲突，因为 jquery 也会监视 url 上的更改。我以前也遇到过类似的问题。