$ scope。$ watch on $ location.search()在使用AngularUI Modal时被无限激发

时间:2016-04-17 21:23:32

标签: javascript angularjs modal-dialog angular-ui

我正在尝试使用Angular UI中的$ uibModal来实现模式对话框的打开。以前我使用过Bootstrap UI,打开模态工作正常。现在,由于添加了$ uibModal.open(),当使用$ uibModal.open()调用模态时,$ location.search上的观察者会无限激发。这最终会引发无限的摘要循环错误。

附加信息:观察者位于activate()函数中,用于处理从模态弹出窗口中单击链接的时间,并触发模态以使用新信息进行更新。

编辑:我刚才有了一个主意。可能是因为我在LinkModalController中使用一个函数来打开一个本身也使用LinkModalController的模态?也许这会导致观察者再次激活。在这种情况下,是否有一些方法可以让模态使用LinkModalController?

感谢您的帮助!

我的控制器:

(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');
                }                    
            }, true);

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

这是作为无限摘要循环错误的一部分记录的文本。错误消息是一大块文本,因此我已将其粘贴到Google文档中:https://docs.google.com/document/d/1esqZSMK4_Tiqckm-IjObqTvMGre2Ls-DWrIycvW5CKY/edit?usp=sharing

0 个答案:

没有答案