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

Question

如果在uib-表集中使用，则值不会与作用域的变量绑定。在下面的示例中，我尝试在uib-选项卡内和外部获取$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-选项卡中的input元素绑定。但是当我改变它的值时，这些变化并没有反映在uib-选项卡之外。

琴键

Answer 1

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

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

按对象求解

此外，还可以使用$parent.parentproperty绑定子作用域。这将防止子范围创建自己的属性。

使用$parent的解决方案

Answer 2

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

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

您可以在下面的柱塞链接中验证这一点。

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