Il valore non è vincolante con la variabile scope se utilizzato all'interno di uib-tabset

Question

Il valore non è vincolante con la variabile scope se utilizzato all'interno di uib-tabset. Qui nel seguente esempio ho cercato di ottenere $scope.message all'interno UIB-scheda e al di fuori di esso:

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>

ho dichiarato $scope.message e ha cercato di legarlo con l'elemento input all'interno UIB-scheda. Ma quando ho cambiato il suo valore, le modifiche non si riflettono al di fuori di uib-tab.

jsfiddle link

Answer 1

sostanzialmente in angolare, se si associa ad una primitiva il valore della variabile viene passata in giro, e non il riferimento ad esso , che può rompere il binding a 2 vie. Sto indovinando che la direttiva tabset crea il proprio ambito, quindi la variabile valueInScope definita nel controller perde il suo binding nell'ambito child del tabset perché è una primitiva.

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

Solution by Object

anche si può usare per legare $parent.parentproperty portata del bambino. Ciò impedirà all'ambito secondario di creare la propria proprietà.

Solution by using $parent

Answer 2

È possibile risolvere questo problema creando un oggetto sulla portata e quindi aggiungendo la proprietà in oggetto invece della portata all'interno del controllore.

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

È possibile verificare questo nel link plunker sotto

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