Angular-ui 引导程序：不能在选项卡中复制日期？

Question

我有一个使用 Angular-ui 引导程序的简单选项卡。

在标签里面，有一个“日期输入”input type="date"/>

<tabset>
    <tab heading="Tab A"> 
        Date Input Inside Tab</br>
        Date 1:<input type="date" ng-model="dt1" style="width:150px"/> {{dt1}}
        <p>Copy Date 1: {{copydt1}}</p>
    </tab>
</tabset>  
<button ng-click="copyDate()">click to show Copy Date</button>

app.js：

$scope.copyDate = function() {
    $scope.copydt1 = $scope.dt1;
    $scope.copydt2 = $scope.dt2;
}

问题是我无法成功复制日期（$scope.dt1）！日期不能复制？！

但是，如果我将“日期输入”放在标签之外，我完全没有问题！

Date Input Outside Tab</br>
Date 2:<input type="date" ng-model="dt2" style="width:150px"/> {{dt2}}
<p>Copy Date 2: {{copydt2}}</p>

我有一个plunker here 来演示这个问题。

如果我遗漏了什么，请提供帮助，并请给我一个解决方法。 或者，有人认为这是一个错误？谢谢。

Answer 1

我猜 tabset 正在创建一个子作用域；类似于使用 ngInclude 时发生的情况。 copydt1 或 dt1 都不会被此子作用域继承，因为它们是父作用域上的简单变量。一种解决方法是将它们包装在一个对象中。

控制器代码更改：

$scope.dt1Wrapper = {
  dt1 : $filter("date")(aday, 'yyyy-MM-dd')
};

$scope.copydt1Wrapper.copydt1 = $scope.dt1Wrapper.dt1;

html代码变化：

Date 1:<input type="date" ng-model="dt1Wrapper.dt1" style="width:150px"/> {{dt1Wrapper.dt1}}
<p>Copy Date 1: {{copydt1Wrapper.copydt1}}</p>  

一旦包裹在一个对象中；它们将被子作用域继承。

http://plnkr.co/edit/d6lwJTucTZ2SZP1tAcpa?p=preview