手动显示AngularStrap下拉 - 如何?

scn*_*iro 15 html javascript angularjs angularjs-directive angular-strap

我想显示AngularStrap下拉手动,撬动trigger结构上$dropdownProvider这样

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

click hover focus一切正常,但为什么不manual呢?我还没有发现任何证据证明这提供了api配置选项.我怎样才能做到这一点?

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

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

我已经找到了一个例子来说明我在努力解决这个问题.为了澄清我的目标,我想在<textarea>键击(ng-model更改)时触发我的下拉菜单.我希望能够抓住下拉列表并调用一个函数来手动触发它,而不使用任何默认的触发器选项,具体而言trigger: manual,并且以直观的方式执行此操作,应该根据api提供,因此所需的解决方案不应该被限制在任何特定的触发器 - 但完全手动,以适应许多不同的用法.

Plunker Link


<textarea ng-model="expression" intellisense></textarea>
Run Code Online (Sandbox Code Playgroud)
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)?
                }
            });
        }
    }
}]);
Run Code Online (Sandbox Code Playgroud)

scn*_*iro 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();
});
Run Code Online (Sandbox Code Playgroud)

这实际上驱动了下拉标记以包含它并绑定到这样的$scope值

<textarea id="textdrop" ng-model="expression" intellisense bs-dropdown="dropdown" bs-show="drop"></textarea>
Run Code Online (Sandbox Code Playgroud)

然后在我的指令中,我可以通过修改$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;
                }
            });
        }
    }
}]);
Run Code Online (Sandbox Code Playgroud)

看来这是在这里引用的项目提交中记录的.官方文件仍然没有提到这是写作的时间,考虑到时间表,我感到惊讶的是,这已经收到了缺乏关注.

Plunker链接与trigger: manual

  • 超级工作.你应该接受自己的答案. (2认同)
  • @davidkonrad感谢您的积极反馈!这太糟糕了,我分了一笔赏金,最后总是迷恋这个,无论如何 (2认同)