ui.router and ui.bootstrap datepicker

Question

If I use a ui.bootstrap datepicker in a ui.router state, i can open the datepicker only one time. You can see the problem in the following link:

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

Is it a bug or what do i wrong? Thanks for your help :-)

score 1 · Accepted Answer · edited May 23 '17 at 10:30

For the two-way data-binding to work, you must have a dot in your ng-model thanks to how the Scope Inheritance works in AngularJS.

If you make the following modifications (which can be seen in this Plunker):

Controller

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

You can read a good explanation of how the scope inheritance works in this answer

ui.router and ui.bootstrap datepicker

1 Answers1