javascript - Visualice manualmente el menú desplegable AngularStrap-¿Cómo?

bs options angular strap

Question

Intento mostrar un menú desplegable de AngularStrap de forma manual, aprovechando la configuración de trigger en $dropdownProvider como tal

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

click focus hover todo funciona bien, pero ¿por qué no manual ? Aún no he descubierto ninguna prueba de que esta opción de configuración de API ofrecida funcione. ¿Cómo puedo hacer esto?

De hecho, parece que este problema se descubrió después de la pregunta original planteada, pero ahora está cerrado y más de un año después todavía tengo que encontrar una solución.

Problema: falta documentación sobre cómo utilizar trigger = manual

He rechazado un ejemplo que ilustra dónde estoy luchando con esto. Para aclarar mi objetivo, quiero activar el menú desplegable en mi <textarea> con una pulsación de tecla (cambio de ng-model ). Estoy buscando agarrar el menú desplegable y llamar a una función para activarlo manualmente sin utilizar ninguna de las opciones de disparo predeterminadas, específicamente trigger: manual , y de una manera intuitiva para hacerlo, como debería ofrecerse de acuerdo con la API, por lo que la solución deseada no debe limitarse a ningún activador específico, sino completamente manual para adaptarse a muchos usos diferentes.

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

Cuando tengo un menú desplegable como el anterior y quiero activarlo manualmente, agrego una id al elemento:

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

y luego simplemente activa el método de elementos click() :

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

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

Esto se puede combinar con teclas rápidas angulares :

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

Answer 2

La activación manual de los marcadores de fecha (o cualquier menú desplegable) ahora es mucho más fácil con v2.0.4 de ngStrap. Para más detalles, mira este comentario de Github .

Aquí hay un plan de trabajo para demostrar que el selector de fecha es tanto un menú desplegable desencadenado manualmente como un elemento en línea desencadenado manualmente.

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

(Y realmente ni siquiera necesita el data-trigger="manual" , por lo que puede dejarlo desactivado si lo desea).

En cuanto a la directiva intellisense, eso no suena como el problema aquí, así que te lo dejo ...

Answer 3

Para cualquier persona interesada, después de investigar el código fuente, descubrí un atributo en la directiva bsDropdown llamado bsShow con la siguiente implementación.

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

Esto esencialmente impulsa el marcado desplegable para incluir esto y enlazar a un valor de $scope como tal

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

Luego, dentro de mi directiva, puedo activar la visibilidad modificando $scope.drop como vinculado a 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;
                }
            });
        }
    }
}]);

Parece que esto se documentó en una confirmación de proyecto como se hace aquí . La documentación oficial todavía no menciona esto como el momento de escribir, y dado el cronograma de este, me sorprende la falta de atención que esto ha recibido.

Plunker Enlace con trigger: manual