Angularjs 角度Ui引导日期选择器在焦点上打开

虽然这似乎是一个简单的问题，但我在任何地方都找不到解决办法

就这么简单：

<input type="text" datepicker-popup>

我希望当光标进入时，日历弹出窗口会自动显示，就像jQueryUIDatePicker一样。现在，我要么提供一个按钮，要么按下Alt键，这两个都对我不友好

有一个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 />

以下是观点：

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

注意，您必须在控制器中定义

open

，并将

is open=“open”

放置在输入元素中。我知道这不是最好的解决办法。一旦找到更好的解决方案，我会让它变得更好

---

更新：正如@Akos lukacs在评论中提到的，当禁用angular中的调试数据时，此解决方案不起作用。

alisabzevari的回答在我看来很好，但您最好这样做：

ng-focus='open = true'

我绞尽脑汁想弄清楚

is open

到底是如何工作的，但我最终只是制定了一个wrapper指令，为我的日期选择器进行所有典型的设置，并为

is open

状态设置一个单独的作用域：

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: '='
        }
    };
});

app.directive（'datepickerAuto'，function（）{
返回{
要求：['ngModel']，
限制：'E'，
模板：“”，
链接：功能（范围）{
scope.autoIsOpen=false；
},
范围：{
ngModel:“=”
}
};
});

我现在要做的就是：

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

我会试试，谢谢。。。一个缺点是，您在作用域中放置了一个“opened”标志，它应该是ui中每个可用dtp的一个数组，因此每个dtp都有自己的标志。@KatLimRuiz您是对的。我找不到理想的解决方案，但还是做得更好！实际上，如果禁用调试数据

element.scope（）

和

element.isolateScope（）

将在“生产”中停止工作，则此操作将中断。在我的例子中，刚刚返回了

未定义的
。
<datepicker-auto ng-model="someDate"></datepicker-auto>