Angular UI Bootstrap Datepicker 已打开答案

【问题标题】：Angular UI Bootstrap Datepicker is-openAngular UI Bootstrap Datepicker 已打开
【发布时间】：2015-09-03 06:08:06
【问题描述】：

我已经为此工作了一段时间，但不知道从哪里开始。

我在我的应用程序中使用 Jade 作为我的模板，并且我也在尝试使用 UI Bootstrap 日期选择器。在 UI Bootstrap 0.10.x 中一切正常，但在 0.13.3 中，我无法让 datepicker 上的 is-open 属性正常工作。以下是玉模板摘录：

input(type="text", ng-model="item.exp_date", datepicker-popup="{{datepicker.format}}", min-date="{{datepicker.minDate}}", is-open="{{datepicker.opened}}", close-text="{{datepicker.closeText}}").form-control
    span.input-group-btn
        button(type="button", ng-click="openDatepicker($event)").btn.btn-default
            i.glyphicon.glyphicon-calendar

您可以看到，对于几个属性，我使用角度表达式来获取预设值（即datepicker-popup="{{datepicker.format}}"。但是，当我尝试对is-open 执行相同操作时，该表达式不起作用。所有其他属性都有效很好，如果我只是将is-open="true" 放入属性中，日期选择器至少会在页面加载时显示。问题是你永远无法再次打开它。

这是相关的控制器代码：

$scope.datepicker = {
    format: 'MM-dd-yyyy',
    minDate: new Date(),
    closeText: "Close",
    showWeeks: false,
    yearRange: 50,
    opened: false
}

$scope.openDatepicker = function($event) {
    $scope.datepicker.opened = true;
}

以及浏览器中弹出的错误：

Error: [$parse:syntax] Syntax Error: Token '{' invalid key at column 2 of the expression [{{datepicker.opened}}] starting at [{datepicker.opened}}].
http://errors.angularjs.org/1.4.5/$parse/syntax?p0=%7B&p1=invalid%20key&p2=2&p3=%7B%7Bdatepicker.opened%7D%7D&p4=%7Bdatepicker.opened%7D%7D
    at REGEX_STRING_REGEXP (http://localhost:3030/vendor/angular/angular.js:68:12)
    at Object.AST.throwError (http://localhost:3030/vendor/angular/angular.js:12967:11)
    at Object.AST.object (http://localhost:3030/vendor/angular/angular.js:12954:16)
    at Object.AST.primary (http://localhost:3030/vendor/angular/angular.js:12862:22)
    at Object.AST.unary (http://localhost:3030/vendor/angular/angular.js:12850:19)
    at Object.AST.multiplicative (http://localhost:3030/vendor/angular/angular.js:12837:21)
    at Object.AST.additive (http://localhost:3030/vendor/angular/angular.js:12828:21)
    at Object.AST.relational (http://localhost:3030/vendor/angular/angular.js:12819:21)
    at Object.AST.equality (http://localhost:3030/vendor/angular/angular.js:12810:21)
    at Object.AST.logicalAND (http://localhost:3030/vendor/angular/angular.js:12802:21) <div ui-view="locations" class="ng-scope">

就像我说的，is-open 属性是唯一存在此问题的属性。如果您对解决问题或解决方法有任何建议，我很乐意听到。谢谢！

【问题讨论】：

标签： angularjs twitter-bootstrap datepicker angular-ui-bootstrap

【解决方案1】：

当然，在我发布问题之后，我就发现了问题所在。显然对于该属性，{{ }} 是不必要的。所有其他属性都需要花括号，但那个不需要。一定是因为它假设您将添加一个变量来切换可见性。

不管是什么原因，我都想通了，让它再次工作。我会留下这个，以防其他人像我一样陷入困境并且无法让它再次工作。

【讨论】：

【解决方案2】：

对于 angularjs 的属性（无论如何），{{ }} 不是必需的，在这个属性中你在 angularjs 中，不需要调用 angularjs。

【讨论】：