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

【问题标题】：Value is not binding with scope's variable if used inside uib-tabset如果在 uib-tabset 中使用，值不会与作用域的变量绑定
【发布时间】：2015-11-06 06:14:12
【问题描述】：

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

【问题讨论】：

标签： javascript html angularjs angular-ui

【解决方案1】：

基本上在 Angular 中，如果您绑定到原始变量的值，则会传递变量的值，而不是对它的引用，这可能会破坏 2 向绑定。我猜 tabset 指令创建了自己的作用域，所以控制器中定义的 valueInScope 变量失去了它在 tabset 子作用域中的绑定，因为它是一个原语。

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

Solution by Object

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

Solution by using $parent

【讨论】：

解决了我在使用 $uibModalInstance 时遇到的类似问题

【解决方案2】：

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

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

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

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

【讨论】：