javascript - 如果在 uib-tabset 中使用，则值不与范围的变量绑定(bind)

Question

如果在 uib-tabset 中使用，值不会与作用域的变量绑定(bind). 在下面的示例中，我试图在 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 元素绑定(bind)。但是当我改变它的值(value)时，这些变化并没有反射(reflect)在 uib-tab 之外。

jsfiddle link

Answer 1

基本上在 Angular 中，如果你绑定(bind)到一个基元，变量的值会被传递，而不是对它的引用，这会破坏双向绑定(bind)。我猜测 tabset 指令创建了它自己的范围，因此在 Controller 中定义的 valueInScope 变量失去了它在 tabset 的子范围内的绑定(bind)，因为它是一个原语。

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

Solution by Object

您也可以使用 $parent.parentproperty 来绑定(bind)子作用域。这将阻止子作用域创建自己的属性。

Solution by using $parent