Значение не связывается с переменной области, если используется внутри uib-tabset

Question

Значение не связывается с переменной scope, если используется внутри uib-tabset. Вот в следующем примере я пытался получить $scope.message внутри и снаружи вкладки:

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

<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">
 <uib-tabset>
     <uib-tab heading="Static title">
            <input type="text" ng-model="message" ng-change="change()" /> 
            <br />
            Inside uib-tab : {{ message }}
    </uib-tab>
     <uib-tab heading="Another title">
       I've got an HTML heading, and a select callback. Pretty cool!
     </uib-tab>
   </uib-tabset>
    Outside uib-tab : {{ message }}
</div>

Я объявил $scope.message и пытался связать это с input элемент внутри uib-tab. Но когда я изменил его значение, изменения не отражаются за пределами uib-tab.

ссылка jsfiddle

Answer 1

В основном в angular, если вы привязываетесь к примитиву, передается значение переменной, а не ссылка на нее, что может нарушить двустороннее связывание. Я предполагаю, что директива tabset создает свою собственную область, поэтому переменная valueInScope, определенная в контроллере, теряет свою привязку в дочерней области действия tabset, потому что это примитив.

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

Решение по объекту

также вы можете использовать $parent.parentproperty привязать дочернюю область. Это предотвратит создание дочерней областью своего собственного свойства.

Решение с использованием $parent

Answer 2

Вы можете решить эту проблему, создав объект в области, а затем добавив свойство объекта вместо области внутри контроллера.

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

Вы можете убедиться в этом по ссылке ниже.

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