Der Wert ist nicht bindend mit der Variablen des Bereichs, wenn er innerhalb von uib-tabset verwendet wird

Question

Wert ist nicht bindend mit der Variablen des Bereichs, wenn er in uib-tabset verwendet wird. Hier Beispiel in folgenden habe ich versucht $scope.message innen UIB-Tab zu erhalten und außerhalb davon:

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>

Ich erklärte $scope.message und versuchte es mit dem input Element innerhalb UIB-Register zu binden. Aber wenn ich den Wert ändere, spiegeln sich die Änderungen nicht außerhalb von uib-tab wider. anstelle des Bereichs in der Steuerung

jsfiddle link

Answer 1

Grundsätzlich in eckig, wenn Sie zu einem primitiven den Wert der Variablen binden um übergeben wird, und nicht der Verweis auf sie , die 2-Wege-Bindung brechen kann. Ich nehme an, dass die Tabset-Direktive einen eigenen Bereich erstellt, so dass die Variable valueInScope, die im Controller definiert ist, ihre Bindung im untergeordneten Bereich des Tabsets verliert, da es sich um ein primitives Element handelt.

$scope.data = {message:'my message'} 

Solution by Object

auch können Sie $parent.parentproperty verwenden Kind Umfang zu binden. Dadurch wird verhindert, dass der untergeordnete Bereich eine eigene Eigenschaft erstellt.

Solution by using $parent

Answer 2

können Sie dieses Problem lösen, indem ein Objekt auf den Rahmen zu schaffen und dann das Objekt auf dem Objekt.

$scope.obj = {message : 'my message'}; 

Sie können diesen Link in der unten Plunker überprüfen

http://plnkr.co/edit/3koAJnkOyf6hfGwO6AuD?p=preview