Question

我已经在这方面工作了一段时间，我不知道从哪里开始。

我在我的应用程序中使用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"放入属性，则datepicker至少会显示在页面加载上。问题是你永远不能再打开它。

以下是相关的控制器代码：

$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

当然，在我发布问题之后，我发现了问题。显然，对于该属性，import java.awt.*; import java.awt.event.*; import javaisms.out; import javax.swing.*; public class FoldDrag extends JLayeredPane { public TexturedPanel backingPanel = new TexturedPanel(new GridBagLayout(),"data/gui/grayerbricks.png"); static JPanel windowbase=new JPanel(); static JPanel restrictedpanel=new JPanel(new GridBagLayout()); GridBagConstraints gbc = new GridBagConstraints(); public FoldDrag() { JButton addpan = new JButton("Add things"); windowbase.add(addpan); windowbase.add(restrictedpanel); restrictedpanel.setBackground(Color.red); restrictedpanel.setPreferredSize(new Dimension(200,200)); gbc.weighty=1; gbc.weightx=1; gbc.gridx=0; gbc.gridy=0; gbc.gridheight=1; gbc.gridwidth=1; gbc.fill=GridBagConstraints.HORIZONTAL; addpan.addActionListener(new ActionListener() { int number=0; @Override public void actionPerformed(ActionEvent e) { number++; gbc.gridy=number; JPanel tmppanel = new JPanel(); tmppanel.setPreferredSize(new Dimension(100,30)); if(number%3==0) tmppanel.setBackground(Color.blue); if(number%3==1) tmppanel.setBackground(Color.yellow); if(number%3==2) tmppanel.setBackground(Color.green); restrictedpanel.add(tmppanel,gbc); restrictedpanel.validate(); } }); windowbase.setVisible(true); } private static void createAndShowUI() { JFrame frame = new JFrame("DragLabelOnLayeredPane"); frame.getContentPane().add(windowbase); FoldDrag thedrag=new FoldDrag(); windowbase.add(thedrag); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.setPreferredSize(new Dimension(300,300)); frame.pack(); frame.setResizable(true); frame.setLocationRelativeTo(null); frame.setVisible(true); } public static void main(String[] args) { out.active=true; java.awt.EventQueue.invokeLater(new Runnable() { public void run() { createAndShowUI(); } }); } }是不必要的。所有其他属性都需要大括号，但那个属性不需要。必须是因为它假设您将添加一个变量来切换可见性。

无论是什么原因，我都想出来并让它再次运作。我会留下这个，以防其他人像我一样陷入困境，无法让它再次运作。

Answer 2

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

Angular UI Bootstrap Datepicker是开放的

2 个答案: