Question

如果我在ui.router状态下使用ui.bootstrap日期选择器，我只能打开一次日期选择器。您可以在以下链接中看到问题：

<!DOCTYPE html>
<html ng-app="myapp">

<head>
    <title>AngularJS: UI-Router Quick Start</title>
    <!-- Bootstrap CSS -->
    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css" rel="stylesheet">

</head>

<body class="container" ng-controller="testController">

  <div class="navbar">
    <div class="navbar-inner">
      <a class="brand" href="#">Quick Start</a>
      <ul class="nav">
        <li><a ui-sref="route1">Route 1</a></li>
      </ul>
    </div>
  </div>

  <div class="row">
    <div class="span12">
      <div class="well" ui-view></div>        
    </div>
  </div>         

  <!-- Angular -->
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js"></script>
  <!-- UI-Router -->
  <script src="//angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
  <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.min.js"></script>

  <!-- App Script -->
  <script>
    angular.module('myapp', ['ui.bootstrap', "ui.router"])
      .config(function($stateProvider, $urlRouterProvider){

      // For any unmatched url, send to /route1
      $urlRouterProvider.otherwise("/route1")

      $stateProvider
        .state('route1', {
            url: "/route1",
            templateUrl: "route1.html"
        })
    })
    .controller('testController', function ($scope) {

      $scope.open = function($event) {
        $event.preventDefault();
        $event.stopPropagation();

        $scope.opened = true;
      };
    })
  </script>

</body>

</html>

http://plnkr.co/edit/eN3QVFR1hFryb51sfdk8

这是一个错误还是我错了什么？谢谢你的帮助： - ）

Answer 1

要使双向数据绑定起作用，您必须在ng-model中有一个点，这要归功于Scope继承在AngularJS中的工作方式。

如果您进行了以下修改（可以在this Plunker中看到）：

<强>控制器

 $scope.open = function($event) {
        $event.preventDefault();
        $event.stopPropagation();

        $scope.obj = {
          opened : true
          };
      };

HTML

<input type="text" 
class="form-control" 
datepicker-popup="{{format}}" 
ng-model="dt" 
is-open="obj.opened"
min-date="minDate" 
max-date="'2015-06-22'" 
datepicker-options="dateOptions" 
date-disabled="disabled(date, mode)" 
ng-required="true" 
close-text="Close" />

您可以阅读范围继承如何工作的良好解释in this answer

ui.router和ui.bootstrap datepicker

1 个答案: