15

我正在尝试手动显示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更改）。我希望保留下拉菜单并调用一个函数来手动触发它，而不使用任何默认触发选项，具体来说trigger: manual，并以直观的方式来执行此操作，应根据 api 提供，因此是所需的解决方案不应局限于任何特定的触发器 - 而是完全手动以适应许多不同的用途。

Plunker 链接

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

3 回答 3

11

对于任何有兴趣的人，在深入研究源代码后，我发现指令上的一个属性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;
                }
            });
        }
    }
}]);

看来这已记录在此处引用的项目提交中。官方文档在撰写本文时仍然没有提到这一点，鉴于时间线，我很惊讶它没有受到关注。

Plunker 链接与trigger: manual

于 2015-05-08T01:39:25.777 回答
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();

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

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

hotkeys.bindTo($scope)
    .add({
        combo: '<key-combination>',
        description: '<description>',
        callback: function() {
            $scope.dropdown.click()
        }
    })
于 2015-05-06T09:12:32.400 回答
0

现在使用 ngStrap 的 v2.0.4 手动触发日期选择器（或任何下拉菜单）要容易得多。有关更多详细信息，请参阅此 Github 评论。

这是一个有效的 plunk，用于将 datepicker 演示为手动触发的下拉菜单和手动触发的内联元素。

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

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

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

于 2014-07-25T23:28:38.453 回答