Angular Bootstrap提前输入-追加到主体-卡住

Angular Bootstrap Typeahead - Append to Body - Stuck

本文关键字：追加 主体 卡住 输入 Bootstrap Angular      更新时间：2023-09-26

与routing结合使用append to body时，typeahead显示会卡在body上。

typeahead-append-to-body="true"

我使用了Angular种子项目和一个简单的Typeahead示例，复制了这个问题:http://plnkr.co/WSNIRKLqOCLqO87jp3an

  • 加载页面
  • 选择"view2"
  • 选择"view1"
  • 在输入
    • 中输入alpha字符'a'
  • 观察附在正文上的预输入显示
  • 选择view2
  • 观察显示仍然附在主体上

我试过的所有浏览器都出现了这个问题。

我看到了到文档的单击绑定，但是如果页面之前已经路由到，则不会调用遣散clickhandler。这意味着它的工作很好第一次，但当你回到一个页面，你已经到过它从来没有第一个解散clickhandler。

https://github.com/angular-ui/bootstrap/blob/master/src/typeahead/typeahead.js 

// Keep reference to click handler to unbind it.
  var dismissClickHandler = function (evt) {
    if (element[0] !== evt.target) {
      resetMatches();
      scope.$digest();
    }
  };
  $document.bind('click', dismissClickHandler);
  originalScope.$on('$destroy', function(){
    $document.unbind('click', dismissClickHandler);
  });
  var $popup = $compile(popUpEl)(scope);
  if ( appendToBody ) {
    $document.find('body').append($popup);
  } else {
    element.after($popup);
  }

任何想法吗?

请注意，在撰写本文时，使用最新版本的Angular(1.4.7)和Angular UI Bootstrap(0.14.3)已经修复了这个问题。因此，我关闭了https://github.com/angular-ui/bootstrap/issues/2551.

我相信这是angular-bootstrap在其作用域被破坏时不调用$popup.remove()的错误。

第一次看起来工作得很好是因为当你导航到视图2时，模板还没有在缓存中准备好，所以它需要一些时间来加载，这允许dismissClickHandler()得到执行并隐藏一个弹出窗口。

但是仅仅隐藏弹出窗口是不够的。它应该从DOM中移除。

在你的plunker中，如果你在视图之间来回导航几次，然后检查DOM，你会看到很多悬浮的ui元素仍然在那里，但隐藏在document.body

runTarm让我走上了正确的道路。这是我的(相当脏的)修复，我从DOM中删除了在destroy作用域时的预输入:

  originalScope.$on('$destroy', function(){
    $document.find('[id^=typeahead]').remove();
    $document.unbind('click', dismissClickHandler);
  });

我提交了一个bug: https://github.com/angular-ui/bootstrap/issues/2551

相关文章：