Display AngularStrap Dropdown Manually - How?

Question

I am trying to display an AngularStrap dropdown manually, leveraging the trigger configuration on $dropdownProvider as such

// how dropdown is triggered - click | hover | focus | manual
app.config(function($dropdownProvider) {
    angular.extend($dropdownProvider.defaults, {
        trigger: 'manual'
    });
});

click hover focus all work fine, but why not manual? I have yet to discover any proof that this offered api configuration option works. How can I do this?

In fact, this issue seems to have been discovered after my original question positing, but is now closed and over a year later I have yet to find a solution still.

Issue: Documentation on how to use trigger=manual is missing

I have stubbed out an example that illustrates where I am struggling with this. To clarify my goal, I want to trigger the dropdown in my <textarea> on a keystroke (ng-model change). I am looking to get a hold on the dropdown and call a function to manually trigger it without using any of the default trigger options, specifically trigger: manual, and in an intuitive way to do so as should be offered according to the api, so the desired solution should not be constrained to any specific trigger - but entirely manual to accommodate many differing usages.

Plunker Link

---

<textarea ng-model="expression" intellisense></textarea>

---

app.directive('intellisense', [function () {
    return {
        restrict: 'A',
        link: function (scope, elem, attrs) {
          scope.$watch(attrs.ngModel, function (v) {
                if(v) {
                  // how do I trigger dropdown here on keystroke (model change)?
                }
            });
        }
    }
}]);

Answer 1

For anyone interested, after digging through the source code, I discovered an attribute on directive bsDropdown called bsShow with the following implementation.

// Visibility binding support
attr.bsShow && scope.$watch(attr.bsShow, function(newValue, oldValue) {
    if(!dropdown || !angular.isDefined(newValue)) return;
    if(angular.isString(newValue)) newValue = !!newValue.match(/true|,?(dropdown),?/i);
    newValue === true ? dropdown.show() : dropdown.hide();
});

This essentially drives the dropdown markup to include this and bind to a $scope value as such

<textarea id="textdrop" ng-model="expression" intellisense bs-dropdown="dropdown" bs-show="drop"></textarea>

Then within my directive I can trigger visibility by modifying $scope.drop as bound on bs-show="drop"

app.directive('intellisense', [function () {
    return {
        restrict: 'A',
        link: function (scope, elem, attrs) {
          scope.$watch(attrs.ngModel, function (v) {
                if(v) {
                  scope.drop = true; // simple - but works
                } else {
                  scope.drop = false;
                }
            });
        }
    }
}]);

---

It appears this was documented on a project commit as referenced here. The official documentation still makes no mention of this as the time of writing, and given the timeline of this I am surprised the lack of attention this has received.

Plunker Link with trigger: manual

Answer 2

When I have a dropdown as above and want to trigger it manually, I add an id to the element :

<button id="myDropdown" type="button" class="btn btn-lg btn-primary" data-animation="am-flip-x" bs-dropdown="dropdown">
    Click to toggle dropdown
</button>

and then simply trigger the elements click() method :

$scope.dropdown = angular.element("#myDropdown");
...
$scope.dropdown.click();

demo -> http://plnkr.co/edit/v5AuBOiMN6TZCPE4eYk2?p=preview

This can be combined with angular-hotkeys :

hotkeys.bindTo($scope)
    .add({
        combo: '<key-combination>',
        description: '<description>',
        callback: function() {
            $scope.dropdown.click()
        }
    })

Answer 3

Manually triggering datepickers (or any dropdown) is now much easier with v2.0.4 of ngStrap. For more details, see this Github comment.

Here's a working plunk to demonstrate the datepicker as both a manually-triggered dropdown, and as a manually-triggered inline element.

<input type="text" ng-model="dropdownDatepicker.date" bs-datepicker data-trigger="manual" data-bs-show="dropdownDatepicker.show">

(And you really don't even need the data-trigger="manual", so you can leave that off if you want).

As for the intellisense directive, that doesn't sound like the issue here, so I'll leave that to you...