角度UIモーダルが原因で無限大ダイジェストループが発生する

Question

モーダルポップアップウィンドウで記事を取得して開くことができるシステムを作成するのに苦労しています。 Bootstrapモーダルを使用して正常に実装されましたが、いくつかの新しい要件があるため、角度UIモーダルを使用して変換する必要があります。

私の問題はAngularの$ location.search（）でのURL変更の処理に起因すると考えられますが、それを特定することはできません。

$ uibModal.open（）呼び出しを追加して以来、記事をクリックするたびに、この無限大ダイジェストループが発生し、コントローラでopenModal関数が起動されます。

コントローラコードと以下に示すエラーメッセージが含まれます。コントローラへの2つのエントリポイントは、$ rootScope。$ onと$ scope。$ watchコールの一番下にあります。これにより、モーダルはURLの変更に対応できます。

最終目標は、URLが変更されたときに角型UIモーダルを開くことができるため、モーダルが解除されたときにURLパラメータを削除できます。

ありがとうございました！

マイコントローラ：

(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モデルを使用してポップアップを開くと、jqueryはURLの変更も監視するため、角度とjqueryの間で競合する可能性があります。私はこれまで同様の問題を抱えていました。