为什么我的日期选择器没有打开 - BootstrapUI - Angular

Question

我正在尝试从 UI Bootstrap 获取 datepicker，以便在我单击图标时打开。这是我的 html:

<p class="input-group">
    <input type="text" class="form-control" datepicker-popup ng-model="dt" is-open="opened"/>
<span class="input-group-btn">
  <button type="button" class="btn btn-default" ng-click="open()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>

这是我的 js:

scope.open = function() {
    scope.opened = true;
};

scope.opened = false;

当我点击按钮时，我点击了 open()，opened 发生了变化，但没有任何反应。 datepicker 没有出现。奇怪的是，如果我把 ng-click 放在输入上：

<input type="text" class="form-control" datepicker-popup ng-model="dt" is-open="opened" ng-click="open()"/>

然后 datepicker 正常工作并正常打开。我在某处遗漏了一些东西。有谁明白这是什么问题吗？

Answer 1

这是一个范围问题，因为您正在将模型变量设置为基元。

尝试在对象中声明 opened 变量，例如status.opened:

<p class="input-group">
    <input type="text" class="form-control" datepicker-popup ng-model="dt" is-open="status.opened"/>
    <span class="input-group-btn">
        <button type="button" class="btn btn-default" ng-click="open()"><i class="glyphicon glyphicon-calendar"></i></button>
    </span>
</p>

控制器

scope.status = {
    opened: false
}

scope.open = function () {
    scope.status.opened = true;
};

Answer 2

在对象中声明 opened 变量。
将 $event 对象传递到控制器的打开事件中，并在设置 scope.status.opened = true 之前调用 $event.stopPropagation();。

标记

<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>

控制器

scope.open = function ($event) {
    $event.stopPropagation();
    scope.status.opened = true;
};

我理解的解释。

datepicker 指令生成 html 以呈现日期选择器弹出窗口。 stopPropagation() 防止 javascript 单击事件来自 cascading\bubbling 您单击的元素。您没有看到弹出窗口的原因是点击事件冒泡到生成的 html，被第二次处理，并有效地关闭弹出窗口（类似于打开弹出窗口然后在内部再次单击的行为关闭它）。

为什么我的日期选择器没有打开 - BootstrapUI - Angular

Why is my datepicker not opening - BootstrapUI - Angular

angularjs

angular-ui-bootstrap