Question

在我进入冗长的解释和代码之前，我只想说我明白我对这个系统的实现是一个黑客工作。目标是在SPA应用程序上实现链接功能，而不必彻底改进已经使用Angular和Bootstrap模式完成的工作。我打赌我可能已经用指令完成了更好的事情，但我对指令的理解却缺乏。

以下是系统检测到URL更改时启动的功能。传递新的URL参数，并用于查询后端的内容。

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

        /*Show modal loading gif*/
        vm.isModalLoading = true;
        $("#contentPartModal").modal();

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

单击链接时会运行以下功能。它添加了从后端检索内容到URL所需的参数。

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

        return;
    }

以下是解决方案开始看起来像黑客工作的地方。当模态关闭时，我需要从URL中删除参数，但是我找不到从Angular控制器（调用上述函数的范围）中捕获Bootstrap模态关闭事件的方法。相反，我在脚本标签中编写了以下JavaScript代码，没有Angular的$ location依赖。

<script>
    /*
     * Detect the closing of a modal window and modify the URL to no longer display linking information.
     * Not handled in Angular because Angular lacks a suitable way to detect a bootstrap modal close.
     */
    $('#contentPartModal').on('hidden.bs.modal', function () {
        var pageUrl = $.url();
        var pageParams = pageUrl.param();

        if (pageParams.q) {
            if (history.pushState) {
                var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?q=' + pageParams.q;
                window.history.pushState({ path: newurl }, '', newurl);
            }
        } else {
            if (history.pushState) {
                var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname;
                window.history.pushState({ path: newurl }, '', newurl);
            }
        }
    });
</script>

这是由此产生的错误。第一次单击链接时，所有这些功能都可以正常运行。打开模态并显示正确的数据。关闭模式时，URL参数将从视图中删除。当您单击另一个链接时，将调用setUrl函数，但URL实际上不会更改。这导致模态弹出窗口无法打开。再次单击任何链接，一切都按预期工作。产生的错误是在第一次打开模态后需要点击两次链接。

非常感谢任何有关此错误原因的提示。我也接受一个更好实施的想法，这将有助于我完全绕过这个问题。

谢谢，

马特

使用JavaScript的history.pushState和Angular的$ location.search（）

0 个答案: