Question

当使用追加到身体并结合路线时，预先显示会粘在身上。

typeahead-append-to-body="true"

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

加载页面
选择＆＃39; view2＆＃39;
选择＆＃39; view1＆＃39;
输入字母字符＆＃39; a＆＃39;进入输入
观察身体附着的先行显示器
选择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（1.4.7）和Angular UI Bootstrap（0.14.3）修复了这个问题。因此，我已关闭https://github.com/angular-ui/bootstrap/issues/2551。

Answer 2

我相信这是一个角度引导的错误，当它的范围被破坏时不会调用$popup.remove()。

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

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

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

Answer 3

runTarm让我走上正轨。这是我的（非常脏）修复，我在范围的破坏中从DOM中删除了typeahead：

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

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

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

3 个答案: