uib-tabset内で使用されている場合、値はスコープの変数とバインドされません。

uib-tabsetの範囲内で使用すると、値はスコープの変数とバインドされません。ここでの例は次の私は、UIB-タブ内の$scope.messageを取得しようとしましたし、それの外：uib-tabset内で使用されている場合、値はスコープの変数とバインドされません。

angular.module("app", ["ui.bootstrap"]) 
 
\t \t .controller("myctrlr", ["$scope", function($scope){ 
 
      $scope.message = "my message "; 
 
\t \t }]);

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.min.js"></script> 
 
<div ng-app="app" ng-controller="myctrlr" class="col-md-6 col-md-offset-3"> 
 
\t <uib-tabset> 
 
\t  <uib-tab heading="Static title"> 
 
      <input type="text" ng-model="message" ng-change="change()" /> 
 
      <br /> 
 
      Inside uib-tab : {{ message }} 
 
\t \t </uib-tab> 
 
\t  <uib-tab heading="Another title"> 
 
\t  I've got an HTML heading, and a select callback. Pretty cool! 
 
\t  </uib-tab> 
 
    \t </uib-tabset> 
 
    Outside uib-tab : {{ message }} 
 
</div>

私は$scope.messageを宣言し、UIB-タブ内のinput要素でそれをバインドしようとしました。しかし、私がそれを価値に変えたとき、変更はuib-tabの外部に反映されていません。

jsfiddle link

出典

2015-11-06 afzalex