Дисплей AngularStrap Dropdown вручную - как?

Я пытаюсь отобразить раскрывающийся список AngularStrap вручную, используя конфигурацию trigger на $dropdownProvider как таковой

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

click hover focus все работает нормально, но почему бы не manual? Я еще не нашел никаких доказательств того, что этот предлагаемый вариант конфигурации api работает. Как я могу это сделать?

Фактически, этот вопрос, кажется, был обнаружен после моего первоначального вопроса, но теперь он закрыт, и через год мне еще предстоит найти решение.

Проблема: Отсутствует документация о том, как использовать trigger = manual

Я пропустил пример, иллюстрирующий, с чем я борюсь. Чтобы прояснить мою цель, я хочу вызвать раскрывающийся список в моем <textarea> при нажатии клавиши (ng-model change). Я ищу, чтобы удержаться в раскрывающемся списке и вызвать функцию, чтобы вручную запускать ее, не используя ни один из параметров триггера по умолчанию, в частности trigger: manual, и интуитивно понятным способом сделать это, как следует предлагать в соответствии с api, поэтому желаемое решение не должно ограничиваться каким-либо конкретным триггером - но полностью ручным, чтобы соответствовать многим различным обычаям.

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)?
                }
            });
        }
    }
}]);

Ответ 1

Для всех, кто заинтересован, после копания исходного кода, я обнаружил атрибут директивы bsDropdown, называемый bsShow, со следующей реализацией.

// 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();
});

Это по существу приводит к разметке раскрывающегося списка, чтобы включить его и привязать к значению $scope как таковой

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

Тогда в моей директиве я могу вызвать видимость, изменив $scope.drop как связанный на 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;
                }
            });
        }
    }
}]);

Похоже, что это было зафиксировано в проекте commit в качестве ссылки здесь. Официальная документация до сих пор не упоминает об этом как о времени написания, и учитывая сроки этого, я удивлен отсутствием внимания, которое это получило.

Plunker Link с trigger: manual

Ответ 2

Когда у меня есть выпадающее меню, как указано выше, и вы хотите запустить его вручную, я добавляю элемент id к элементу:

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

а затем просто вызвать метод click():

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

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

Это можно объединить с angular-hotkeys:

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

Ответ 3

Вручную запускать датупиксеров (или любой выпадающий список) теперь намного проще с v2.0.4 ngStrap. Для получения дополнительной информации см. этот комментарий Github.

Здесь рабочий планшет, чтобы продемонстрировать датупик как выпадающее меню вручную, и как встроенный вручную элемент.

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

(И вам действительно даже не нужен data-trigger="manual", поэтому вы можете оставить это, если хотите).

Что касается директивы intellisense, это не похоже на проблему здесь, поэтому я оставлю это вам...