Angular UI Bootstrap 日期选择器已打开

Question

我已经为此工作了一段时间，但我不确定从这里该何去何从。

我在我的应用程序中使用 Jade 作为我的模板，并且我也在尝试使用 UI Bootstrap 日期选择器。在 UI Bootstrap 0.10.x 中一切正常，但在 0.13.3 中我无法使日期选择器上的 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

您可以看到，对于几个属性，我使用 angular 表达式来获取预设值（即 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 属性是唯一存在此问题的属性。如果您对解决问题或解决问题有任何建议，我很乐意听取。谢谢！

Answer 1

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

不管是什么原因，我想通了并让它重新工作。我会保留它，以防其他人像我一样被卡住，无法让它再次工作。

Answer 2

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

Angular UI Bootstrap 日期选择器已打开

Angular UI Bootstrap Datepicker is-open

datepicker

twitter-bootstrap

angularjs

angular-ui-bootstrap