javascript - 手动显示 AngularStrap 下拉列表 - 如何?

标签 javascript html angularjs angularjs-directive angular-strap

我正在尝试显示 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)?
                }
            });
        }
    }
}]);

最佳答案

对于任何感兴趣的人,在深入研究源代码之后,我在指令 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();
});

这实质上驱动下拉标记包含它并绑定(bind)到 $scope 值本身

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

然后在我的指令中,我可以通过将 $scope.drop 修改为绑定(bind)到 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使用触发器:手动

关于javascript - 手动显示 AngularStrap 下拉列表 - 如何?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22775141/

相关文章:

javascript - 如何在加载另一段动态 HTML 后附加动态 HTML?

javascript - mongoosejs 如何对不同的查询进行排序?

javascript - 获取看起来像选择器的祖先元素

angularjs - 使用 Angular 2 Typescript 设置 http header

javascript - ???使用 Prerender.io 的 AngularJS 应用程序的社交网络爬虫中的元标记中的问号

javascript - vue 中对象属性变为空白

java - 是否有一种简单而干净的方法将表单输入绑定(bind)到域类上的两个属性?

javascript - 从 XML 中提取数据不起作用

javascript - 在 JavaScript 中单击按钮时将用户输入添加到列表

javascript - 在 Angular 1.5.3 中从不同指令将项目传递给 ng-options 时出现摘要循环错误