Angular Bootstrap Typeahead - 附加到身体 - 被困住

Question

当使用追加到身体并结合路线时,先行显示器会粘在身体上.

typeahead-append-to-body="true"

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

• 加载页面
• 选择'view2'
• 选择'view1'
• 在输入中键入字母'a'
• 观察贴在身体上的先行显示器
• 选择view2
• 观察显示仍然附着在身体上

我试过的所有浏览器都会出现问题.

我看到点击绑定到文档的火,但如果页面已被路由到之前,则不会调用dismissClickHandler.这意味着它第一次工作正常,但当你回到之前去过的页面时,它永远不会解雇dismissClickHandler.

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

有什么想法吗？

Answer 1

我相信这是 Angular-bootstrap 的一个错误，$popup.remove()当它的作用域被破坏时不会调用。

它第一次看起来工作正常的原因是，当您导航到视图 2 时，模板尚未在缓存中准备好，因此需要一些时间来加载，并且允许执行dismissClickHandler()并隐藏弹出窗口。

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

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