无法使用 Angular js 中的选项卡从日期选择器中获取选定的日期答案

【问题标题】：not able to get selected date from datepicker with tabs in Angular js无法使用 Angular js 中的选项卡从日期选择器中获取选定的日期
【发布时间】：2015-07-29 10:38:47
【问题描述】：

我在 angular bootstrap 的 tabset 元素中使用 datepicker。当我在选项卡内使用 datepicker 并选择日期时，我无法在控制器中获得所选日期的正确值。

如果我要删除选项卡，那么我可以获得当前选择的日期。代码在 plunker 中： http://plnkr.co/edit/dIJRDQUYdrKmChdIt9T2?p=preview

 <form name="form" class="form-horizontal" ng-controller="ctrl">
    <tabset>
      <tab justified="true">
        <tab-heading>
          Main
        </tab-heading>
    <div class="form-group">
      <label class="col-xs-2 control-label" for="etaDate">ETA Date</label>
      <div class="input-group col-xs-6 col-sm-4 col-md-2">
        <input class="form-control" id="etaDate" name="etaDate" type="text" ng-model="eta" datepicker-popup="dd/MM/yyyy" is-open="opened.open" show-weeks="false" />
        <span class="input-group-btn">
              <button class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
            </span>
      </div>
    </div>
     <button ng-click="getdate()">GET DATE</button>
      </tab>
    </tabset>
  </form>

script.js

angular.module('myApp', ['ui.bootstrap']);
var ctrl = function($scope) {
  $scope.opened = {};

  $scope.open = function($event) {
    $event.preventDefault();
    $event.stopPropagation();
    $scope.opened.open = true;
  };
  $scope.eta = new Date();

  $scope.getdate = function (){
    alert($scope.eta)
  };

};

【问题讨论】：

Demo 工作正常，但在 ng-model 中应该总是有一个点。
您在 Plunker 中的代码似乎获取了选项卡内的日期

标签： javascript angularjs datepicker angular-bootstrap

【解决方案1】：

可以在下面找到带有两个选项卡的工作演示： http://embed.plnkr.co/RkLGqy5zZjfCqlCuuNPF/preview

“Tabset”目录在主范围内创建自己的隔离范围，具有自己的属性，不会将属性继承给父级。为了解决这个问题，正如@charlietfl 所说，我们应该在 ng-model 中使用点 (.)。

为了更好的理解，请查看https://github.com/angular-ui/bootstrap/issues/1553#issuecomment-31980027

或

更简单的解释：https://stackoverflow.com/a/14049482/1252454

【讨论】：