javascript - Angular Bootstrap Typeahead - Append to Body - Stuck - Stack Overflow

admin管理员组

文章数量:1425763

The typeahead display gets stuck to the body when using append to body in bination with routing.

typeahead-append-to-body="true"

I used the Angular seed project and one of the simple Typeahead examples and replicated the problem:

• Load page
• Select 'view2'
• Select 'view1'
• Type alpha character 'a' into the input
• Observe the typeahead display attached to the body
• Select view2
• Observe display is still attached to the body

Problem happens in all the browsers I tried.

I see the click bindings to the document fire but the dismissClickHandler is not called if the page is has been routed to before. Meaning it works fine the first time, but when you go back to a page that you have been to before it never firs the dismissClickHandler.

.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 = $pile(popUpEl)(scope);
  if ( appendToBody ) {
    $document.find('body').append($popup);
  } else {
    element.after($popup);
  }

Any thoughts?

The typeahead display gets stuck to the body when using append to body in bination with routing.

typeahead-append-to-body="true"

I used the Angular seed project and one of the simple Typeahead examples and replicated the problem: http://plnkr.co/WSNIRKLqOCLqO87jp3an

• Load page
• Select 'view2'
• Select 'view1'
• Type alpha character 'a' into the input
• Observe the typeahead display attached to the body
• Select view2
• Observe display is still attached to the body

Problem happens in all the browsers I tried.

I see the click bindings to the document fire but the dismissClickHandler is not called if the page is has been routed to before. Meaning it works fine the first time, but when you go back to a page that you have been to before it never firs the dismissClickHandler.

https://github./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 = $pile(popUpEl)(scope);
  if ( appendToBody ) {
    $document.find('body').append($popup);
  } else {
    element.after($popup);
  }

Any thoughts?

• javascript
• angularjs
• angular-ui-bootstrap
• angular-routing
• angular-ui-typeahead

Share Improve this question Follow asked Aug 3, 2014 at 19:03 PhillipRCPhillipRC 5111 silver badge22 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

Please note that this is fixed using the latest versions of Angular (1.4.7) and Angular UI Bootstrap (0.14.3) - at the time of this writing. As such, I've closed https://github./angular-ui/bootstrap/issues/2551.

I believe this is a bug of the angular-bootstrap to not call $popup.remove() when its scope has been destroyed.

The reason it seems to work fine at the first time is because when you navigate to view 2, the template has't been ready in a cache yet, so it take sometime to load, and that allow the dismissClickHandler() to get executed and hide a popup.

But just hidding the popup is not enough. It should be removed from the DOM.

In your plunker, if you navigate back and forth between views a few times, then inspect the DOM, you will see a lot of dangling ui elements are still there but hidden in the document.body.

runTarm put me on the right track. This is my (quite dirty) fix, I remove the typeahead from the DOM on destroy of the scope:

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

I submitted a bug: https://github./angular-ui/bootstrap/issues/2551

本文标签： javascriptAngular Bootstrap TypeaheadAppend to BodyStuckStack Overflow