如果在uib-tabset中使用，则值不与作用域的变量绑定

Question

如果在uib-tabset中使用，则值不与作用域的变量绑定。 在下面的示例中，我尝试在uib-tab内部及其外部获取$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并尝试将其与uib-tab中的input元素绑定。 但是当我更改它的值时，更改不会反映在uib-tab之外。

jsfiddle链接

Answer 1

基本上在角度，如果你绑定到一个原语，变量的值被传递，而不是对它的引用，这可以打破双向绑定。 我猜测tabset指令创建了自己的作用域，因此控制器中定义的valueInScope变量在tabset的子作用域中丢失了它的绑定，因为它是一个原语。

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

对象解决方案

您也可以使用$parent.parentproperty绑定子范围。 这将阻止子范围创建自己的属性。

使用$ parent解决方案

Answer 2

您可以通过在作用域上创建对象然后在对象上添加属性而不是在控制器内添加作用域来解决此问题。

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

您可以在下面的plunker链接中验证这一点

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