ui.router 和 ui.bootstrap 日期选择器答案

【问题标题】：ui.router and ui.bootstrap datepickerui.router 和 ui.bootstrap 日期选择器
【发布时间】：2014-07-22 21:41:08
【问题描述】：

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

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

这是一个错误还是我做错了什么？感谢您的帮助:-)

【问题讨论】：

标签： angularjs angular-ui-bootstrap angular-ui-router

【解决方案1】：

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

如果您进行以下修改（可以在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

【讨论】：