微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

angularjs – Angular-Ui Bootstrap DatePicker在焦点上打开

虽然这似乎是一个简单的问题,但我找不到任何解决方案.

很简单:

<input type="text" datepicker-popup>

我希望当光标进入时,日历弹出窗口会自动显示,就像jquery-ui datepicker一样.现在我要提供一个按钮或Alt-down,对我都不友好.

一个is-open属性,但是我不想让变量复杂化在可能已经作为配置可用的东西的范围内? :d.

谢谢

解决方法

编辑:

我终于找到了解决方案.这有点棘手,但它确实有效.这是指令:

app.directive("autoOpen",["$parse",function($parse) {
  return {
    link: function(scope,iElement,iAttrs) {
      var isolatedScope = iElement.isolateScope();
      iElement.on("focus",function() {
        isolatedScope.$apply(function() {
          $parse("isOpen").assign(isolatedScope,"true");
        });
      });

      // Remove DOM Event Listener when $destroy lifecycle event is fired
      scope.$on('$destroy',function() { iElement.off("focus") })
    }
  };
}]);

这是观点:

<input type="text" datepicker-popup="" ng-model="ctrl.dt" auto-open />

这是较旧的解决方案:

您可以编写一个指令来在输入焦点时更改is-open的值:

app.directive("autoOpen",iAttrs) {
      var isOpenVarName = iAttrs.isOpen;
      iElement.on("focus",function() {
        $scope.$apply(function() {
          $parse(isOpenVarName).assign(scope,"true");
        });
      });
    }
  };
}]);

这是观点:

<input type="text" datepicker-popup="" auto-open is-open="open" ng-model="ctrl.dt" />

请注意,您必须在控制器中定义open并在input元素中放置is-open =“open”.我知道这不是最好的解决方案.一旦找到更好的解决方案,我会做得更好.

更新:正如@ Akos-lukacs在评论中提到的,当以角度方式禁用调试数据时,此解决方案不起作用.

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐