手动显示 AngularStrap 下拉菜单 - 如何?

问题描述

我正在尝试利用 triggerAngularStrap dropdown> $dropdownProvider 上的配置

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 一切正常，但为什么不manual?我还没有发现任何证据证明这个提供的 api 配置选项有效.我该怎么做?

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.

问题:缺少有关如何使用 trigger=manual 的文档

我已经举出一个例子来说明我在这方面遇到的困难.为了阐明我的目标，我想在我的 中触发下拉菜单(ng-model 更改).我希望抓住下拉菜单并调用一个函数来手动触发它，而不使用任何默认的触发选项，特别是 trigger: manual，并以一种直观的方式这样做根据 api 提供，因此所需的解决方案不应限于任何特定的触发器 - 而是完全手动以适应许多不同的用途.

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 链接

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

推荐答案

对于任何有兴趣的人，在挖掘源代码之后，我发现指令 bsDropdown 上的一个属性叫做 bsShow> 使用以下实现.

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 并绑定到 $scope 这样的值

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>

然后在我的指令中，我可以通过修改 $scope.drop 作为绑定在 bs-show="drop"

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 带有 trigger: manual

这篇关于手动显示 AngularStrap 下拉菜单 - 如何?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！