Is there a way to populate a angular-ui-bootstrap dropdown-toggle every time I open it?

Question

I want to do a dropdown-toggle like the one that Facebook has for notifications.

I need to populate a list of notifications on a dropdown-toggle every time I open it, with $http or $resource.

I can't find any event or any variable to watch. The documentation is here: http://angular-ui.github.io/bootstrap/#/dropdownToggle

The only thing I've found is that the css class "open" is added/removed from the dropdown when it's opened/closed. I could watch that, but it feels like an ugly hack.

Is there a better way to do this? Thanks.

Answer 1

If you go with the current version of angular-ui's dropdown.js (commit 73c2dea548) that in the the GitHub repository, they have exposed an is-toggled attribute that you can use to find out when the dropdown was opened. It seems like it's not in the 0.10 release of angular-ui bootstrap so you have to make your own custom build.

Although it does have an is-toggled function, there is a small bug where it does not get fired the first time you open it. I have created a fix for it which is in the plunkr that I will link to later on. The change I made was on line 96 to change it from angular.isDefined(wasOpen) to angular.isDefined(isOpen).

Once you have this file you can add an is-toggled attribute to element with the dropdown class.

HTML:

<li class="dropdown" on-toggle="toggled(open)">
  <a class="dropdown-toggle">
    Click me for a dropdown, yo!
  </a>
  <ul class="dropdown-menu">
    <li ng-repeat="choice in items">
      <a>{{choice}}</a>
    </li>
  </ul>
</li>

In your controller:

  $scope.toggled = function(open) {
    var now = new Date();
    $log.info('i was opened...',open,now);
    if (open) {
      $scope.items.push("last opened at " + now);
    }
  };

And here is a working plunker: http://plnkr.co/edit/rdVC8vfvbdtsnkk7bWZn?p=preview