Angular-Ui Bootstrap DatePicker 以焦点打开

Question

虽然这看起来是一个简单的问题，但我找不到任何解决方案。

就这么简单：

<input type="text" datepicker-popup>

我希望当光标进入时，日历弹出窗口会自动显示，如 jquery-ui 日期选择器。现在我必须提供一个按钮或 Alt-down，这对我来说都不友好。

有一个 is-open 属性，但我不想使将变量放入范围内的事情变得复杂，而这些事情可能应该已经作为配置可用？ :D.

谢谢

Answer 1

编辑：

我终于找到了解决办法。这有点棘手，但它确实有效。这是指令：

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", ["$parse", function($parse) {
  return {
    link: function(scope, iElement, 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 并在输入元素中放置 is-open="open"。我知道这不是最好的解决方案。一旦找到更好的解决方案，我会尽快改进。

更新： 正如@Akos-lukacs 在评论中提到的，在 angular.

中禁用调试数据时，此解决方案不起作用

Answer 2

alisabzevari 的回答对我来说似乎很好，但你最好还是这样做：

ng-focus='open = true'

我努力思考 is-open 究竟是如何工作的，但我最终只是做了一个包装器指令，它为我的日期选择器做了所有典型的设置，并为 [=13] 设置了一个单独的范围=] 状态：

app.directive('datepickerAuto', function() {
    return {
        require: ['ngModel'],
        restrict: 'E',
        template: '<input class="input form-control" datepicker-popup="MM/dd/yyyy" show-weeks="false"' +
            ' is-open="autoIsOpen" ng-focus="autoIsOpen = true" ng-click="autoIsOpen = true"'
            +' type="text" ng-model="ngModel" ng-model-options="{\'updateOn\': \'blur\'}"/>',
        link: function(scope) {
            scope.autoIsOpen = false;
        },
        scope: {
            ngModel: '='
        }
    };
});

我现在要做的就是：

<datepicker-auto ng-model="someDate"></datepicker-auto>

Angular-Ui Bootstrap DatePicker 以焦点打开

Angular-Ui Bootstrap DatePicker Open on focus

angularjs

angular-ui-bootstrap