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

Value is not binding with scope's variable if used inside uib-tabset. Here in following example I tried to get $scope.message inside uib-tab and outside of it :

如果在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>

I declared $scope.message and tried to bind it with the input element inside uib-tab. But when I changed it's value, the changes are not reflecting on outside of uib-tab.

我声明了$ scope.message并尝试将其与uib-tab中的input元素绑定。但是当我更改它的值时，更改不会反映在uib-tab之外。

jsfiddle link

jsfiddle链接

2 个解决方案

#1

Basically in angular, if you bind to a primitive the value of the variable is passed around, and not the reference to it, which can break 2-way binding. I'm guessing that the tabset directive creates its own scope, so the valueInScope variable defined in the controller loses its binding in the child scope of the tabset because its a primitive.

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

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

Solution by Object

对象解决方案

also you can use $parent.parentproperty to bind child scope. This will prevent the child scope from creating its own property.

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

Solution by using $parent

使用$ parent解决方案

#2

You can solve this issue by creating an object on the scope and then adding the property on object instead of the scope inside the controller.

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

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

You can verify this in the below plunker link

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

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

#1

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