Angular Typeahead Not Working After $compile

Question

I've modified the popover directive to include files and $compile them. With this I've gotten ng-repeats to work but trying to add a typeahead will not work.

angular.module("app").directive("boundPopover", ['$compile', '$http', function($compile, $http) {
  return {
    restrict: 'A',
    link: function(scope, element, attr, ctrl) {
      var content = attr["popoverContent"];
      var title = attr["popoverTitle"];

      function initPopup() {

        element.popover({
          html: true,
          content: $compile(content)(scope),
          title: $compile(title)(scope),
          placement: attr["popoverPlacement"]
        });
      };

      if(attr["popoverContentInclude"] || attr["popoverTitleInclude"]) {
        var contentLoaded = false;
        var titleLoaded = false;

        if(!attr["popoverContentInclude"]) {
          contentLoaded = true;
        }

        if(!attr["popoverTitleInclude"]) {
          titleLoaded = true;
        }

        if(!contentLoaded) {
          $http.get(attr["popoverContentInclude"]).success(function(d) {
            content = d;

            contentLoaded = true;
            if(titleLoaded) {
              initPopup();
            }
          });
        }

        if(!titleLoaded) {
          $http.get(attr["popoverTitleInclude"]).success(function(d) {
            title = d;

            titleLoaded = true;
            if(contentLoaded) {
              initPopup();
            }
          });
        }
      }
      else
      {
        initPopup();
      }
    }
  }
}]);

Where the included title file is-

<span class="glyphicon glyphicon-search"></span><input class='devices-search' ng-controller="DeviceCtrl" typeahead="state for state in states | filter:$viewValue | limitTo:10" ng-model="state"/>

It works when put straight on the page or in ng-include but not in this situation. Any idea what I can do?

This was a while back and I don't recall. We ended up not doing this I believe. I think the problem would probably be that 2 compiles are needed because the scope is not fully available through the first linking/compiling. So I'd need to check that the entire scope was available, use an ng-include, or create another directive to do the second compile/link. — micah
– micah, Commented Oct 9, 2014 at 15:50

Aleh Kashnikau · Accepted Answer · 2014-10-10 08:04:09Z

2

I've found an answer in typeahead directive sources. You just need to use some container to your input like

var el = angular.element('<div><input type="text" typeahead="value in values" /></div>');
var compiled = $compile(angular.element('<div>').append(el).html())($scope)
myElement.append(compiled);

Why it happens so

So, you created your element

var el = angular.element('<input type="text" typeahead="value in values" />');

and then compiled it and appended to some your element

var compiled = $compile(angular.element('<div>').append(el).html())($scope)
myElement.append(compiled);

In the time of compilations typeahead directives tries to add typeahead-popup like

yourNewElement.after(popup)

But yourNewElement have no parent, so the popup just got lost.

answered Oct 10, 2014 at 8:04

Aleh Kashnikau

1732 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular Typeahead Not Working After $compile

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related