AngularJS Modal服務停止工作

Question

我在我的Angular應用程序中創建了一個modal服務，我可以將其注入到控制器或指令中。我遇到了一個問題，在多次打開/關閉模態後，模態中的所有內容都會停止工作。該模式的工作原理是抓取頁面上隱藏的div的內容並將其彈出到模式中。我已經能夠確定在某個時候，modal.settings的值發生了變化。如果我在我的modal.open函數的開頭處插入一個debugger，並在我的控制檯中保存var x = settings的值，我可以看到在幾個週期後，x !== settings。我也試過比較modal.settings，但同樣的事情發生。最終，幾個週期後，modal.settings的變化和事情停止工作。

我想我需要重構這項服務，但我不知道從哪裏開始，可以使用一些指導。

這裏的服務代碼：

app.service('modal', ['$compile', function($compile) { 
    var modal = this; 
    modal.settings; 
    modal.contents; 
    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) { 
     if(!modal.settings) { 
      modal.settings = settings; 
     } 

     modal.content.empty().append(modal.settings.content); 
     if(modal.settings.class) modal.modal.addClass(modal.settings.class); 
     if(modal.settings.height) modal.modal.css({ height: modal.settings.height }); 
     if(modal.settings.width) modal.modal.css({ width: modal.settings.width }); 
     if(modal.settings.content_height) modal.modal.css({ height: modal.settings.content_height }); 
     if(modal.settings.content_width) modal.modal.css({ width: modal.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() { 
     debugger; 
     modal.settings.elem.empty().append(modal.settings.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; 
     } 
    } 
}]); 

這裏是如何的模式從控制器或指令打開：

modal.open({ 
    content: $('#edit_story_' + story.id), 
    elem: $('#edit_story_' + story.id + '_container') 
}); 

我還試圖運行我elem通過編譯器首先像這樣：

modal.open({ 
    content: $compile($('#edit_story_' + story.id))($scope), 
    elem: $('#edit_story_' + story.id + '_container') 
}); 

這解決了我最初的問題，但現在經過幾個循環我的模態內容被複制。我得到一種形式堆疊在另一個上。

Answer 1

您不應該在控制器中使用DOM元素。一個好主意是按照這種方法實施一項服務，或者做出這樣的事情。 http://ionicframework.com/docs/api/service/$ionicModal/