Sign up ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free.

I've been working on this for a while now, and am not sure where to go from here.

I am using Jade for my templates inside my app, and am trying to use the UI Bootstrap date picker as well. In UI Bootstrap 0.10.x everything was working fine, but in 0.13.3 I can't get the is-open attribute on the datepicker to work properly. Here is the jade template excerpt:

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

You can see that for several attributes I'm using angular expressions to get preset values (i.e. datepicker-popup="{{datepicker.format}}". However, that expression does not work when I try to do the same thing with is-open. All the others work fine, and if I just put is-open="true" in for the attribute, the datepicker at least shows up on page load. The problem is you can never open it again.

Here's the pertinent controller code:

$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;
}

and the error in the browser that pops up:

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">

Like I said, the is-open attribute is the only one having this issue. If you have any suggestions for fixing the issue or a work around I'd love to hear it. Thanks!

share|improve this question

1 Answer 1

Of course right after I posted the question, I figured out the problem. Apparently for that attribute, the {{ }} is unnecessary. All the other attributes need the curly braces, but that one doesn't. It must be because it assumes you will be adding in a variable to toggle the visibility.

Whatever the reason, I figured it out and got it working again. I'll leave this up in case anyone else gets as stuck as I did and can't get it working again.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.