CODEWITHSUNDEEP
angularjstabsangular-uiangular-ui-bootstrap
early
early

Reputation: 543

Angular-ui bootstrap: Date CAN NOT be copied inside Tab?

I've a simple Tab which is using Angular-ui bootstrap.

Inside the tab, there is a 'date input' <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;
}

The problem is I can not copy the date ($scope.dt1) successfully! The date CANNOT be copied?!

However, if I put the 'date input' Outside the tab, I've no problem at all!

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

I've a plunker here to demonstrate the problem.

Please help if I miss anything, and give me a workaround pls. Or, anyone thinks it's a bug? Thanks.

Upvotes: 0

Views: 123

Answers (1)

JeffryHouser
JeffryHouser

Reputation: 39408

I'm guessing tabset is creating a subscope; similar to what happens if you use an ngInclude. Neither copydt1, or dt1, will be inherited by this subscope, as they are simple variables on the parent scope. One work around is to wrap them in an object.

The controller code changes:

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

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

The html code changes:

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

Once wrapped in an object; they will be inherited by the subscope.

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

Upvotes: 3

Related Questions