Question

我正在尝试手动显示AngularStrap dropdown，同时利用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配置选项。我怎么能这样做？

事实上，这个问题似乎是在我最初的问题提出后发现的，但现在已经关闭，一年后我还没有找到解决方案。

问题：Documentation on how to use trigger=manual is missing

我已经找到了一个例子来说明我在努力解决这个问题。为了澄清我的目标，我想在键击（<textarea>更改）时触发ng-model下拉列表。我希望抓住下拉列表并调用函数来手动触发它而不使用任何默认触发器选项，特别是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)?
                }
            });
        }
    }
}]);

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

看来这是在项目提交中记录为引用here。官方文件仍然没有提到这是写作的时间，考虑到时间表，我感到惊讶的是，我们对此缺乏关注。

<{> Plunker Link trigger: manual

Answer 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();

演示 - ＆gt;的 http://plnkr.co/edit/v5AuBOiMN6TZCPE4eYk2?p=preview

这可以与angular-hotkeys结合使用：

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

Answer 3

使用ngStrap的v2.0.4，现在可以更轻松地手动触发日期选择器（或任何下拉列表）。有关详细信息，请参阅this Github comment。

这里的a working plunk to demonstrate日期选择器既是手动触发的下拉列表，也是手动触发的内联元素。

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

（你真的不需要data-trigger="manual"，所以如果你愿意，你可以把它关掉。

至于intellisense指令，这听起来不像这里的问题，所以我会把它留给你......

手动显示AngularStrap下拉 - 如何？

3 个答案: