5

将附加到正文与路由结合使用时，预输入显示卡在正文上。

typeahead-append-to-body="true"

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

  • 加载页面
  • 选择“视图2”
  • 选择“视图1”
  • 在输入中键入字母字符“a”
  • 观察附在机身上的预输入显示器
  • 选择视图2
  • 观察显示器仍然附着在机身上

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

我看到单击绑定到文档触发但如果页面之前已被路由到，则不会调用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);
  }

有什么想法吗？

4

3 回答 3

2

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

于 2015-10-28T16:09:28.430 回答
1

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

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

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

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

于 2014-08-03T19:40:47.373 回答
1

runTarm 让我走上了正轨。这是我的（相当肮脏的）修复，我在销毁范围时从 DOM 中删除了 typeahead：

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

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

于 2014-08-06T13:03:03.703 回答