Custom typeahead template with ng-clicks

[i8ramin]

Hi. I am using the typeahead module and have my own custom template. my template has a few actions in it that I would like to tie to functions in my controller. I haven't been able to figure out how to do this, since it seems like the results popup has its own scope.

Here is my templates:

<ul class="typeahead dropdown-menu" ng-style="{display: isOpen()&&'block' || 'none', top: position.top+'px', left: position.left+'px'}">
  <li ng-repeat="match in matches" ng-class="{active: isActive($index)}" ng-mouseenter="selectActive($index)" class="suggestion">
    <div class="media member-card">
      <div class="bd">
        <div class="info">
          <div class="name" ng-bind-html-unsafe="match.model.name | typeaheadHighlight:query"></div>
          <div class="company">{{match.model.company}}</div>
          <div class="contact">
            <span class="phone">{{match.model.phone}}</span>
          </div>
        </div>

        <div class="actions">
          <a class="action package" ng-click="notifyPackage()">Package</a>
          <a href="#guest" class="action guest" ng-click="notifyGuest()">Guest</a>
          <a href="#food" class="action food" ng-click="notifyFood()">Food</a>
        </div>
      </div>
    </div>
  </li>
</ul>

I would like to tie in some functionality to those "actions" towards the bottom. i.e. ng-click="notifyPackage()". Where would I put this function? How do I access the scope of my SearchCtrl from this template view so that I can do this correctly.

Also, any way to disable the default "reset" of the results when you click on the document?

Thank you,
Ramin

[pkozlowski-opensource]

@i8ramin yes, with the current design the popup with matches gets its own scope. This is needed since we need to have pop-up specific variables. It would be rather hard to change this design but you might want to try "escaping" isolated scope of a popup by prefixing your notification functions with $parent, ex:

<a class="action package" ng-click="notifyPackage()">Package</a>

As for your second question - at the moment there is no way of switching pop-up hiding on clicks outside of the popup. The current behaviour and options were modeled after the original http://twitter.github.io/bootstrap/javascript.html#typeahead

Please note that there is also #182 opened where I'm planning to take a closer look at custom templates. But yeh, this won't be immediately applicable for you - $parent trick is probably your best option here.

[i8ramin]

Thanks for the quick reply Pawel. Did you mean to write this in your
example?

class="action package" ng-click="_$parent._notifyPackage()">Package

I ended up creating a new directive called notify which I added to my
result actions. Still wrapping my head around all this angular scope stuff,
but I got it to do what I wanted. Probably not the cleanest code, but it
seems to works.

I'm very curious to know more about the custom templating options.

Thanks.

---

Ramin

On Mon, Jun 3, 2013 at 4:11 PM, Pawel Kozlowski [email protected]:

@i8ramin https://github.com/i8ramin yes, with the current design the
popup with matches gets its own scope. This is needed since we need to have
pop-up specific variables. It would be rather hard to change this design
but you might want to try "escaping" isolated scope of a popup by prefixing
your notification functions with $parent, ex:

Package

As for your second question - at the moment there is no way of switching
pop-up hiding on clicks outside of the popup. The current behaviour and
options were modeled after the original
http://twitter.github.io/bootstrap/javascript.html#typeahead

Please note that there is also #182https://github.com/angular-ui/bootstrap/issues/182opened where I'm planning to take a closer look at custom templates. But
yeh, this won't be immediately applicable for you - $parent trick is
probably your best option here.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/499#issuecomment-18867612
.