Question

我有一个使用Angular-ui bootstrap的简单Tab。

内部标签中有一个“日期输入”＆lt; input type="date" /＆gt;

<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时会发生的情况。 copylet1或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

Angular-ui bootstrap：日期不能在Tab内复制？

1 个答案: